React函数组件需用useState管理状态、useEffect处理副作用：useState声明状态并更新触发重渲染；useEffect执行数据获取等操作，支持依赖数组控制执行时机，并可返回清理函数防止内存泄漏。
如果您在 React 函数组件中需要管理局部状态并响应生命周期事件，则必须借助 Hook 来实现。以下是使用 useState 和 useEffect 管理状态的具体操作方式：
一、使用 useState 声明和更新状态
useState 是 React 提供的用于在函数组件中添加状态变量的 Hook，它返回一个状态值和一个更新该值的函数。每次调用 setState 都会触发组件重新渲染，并使用新值替换旧值。
1、在组件顶部导入 useState：import { useState } from 'react';
2、声明状态变量，例如声明一个名为 count 的数字状态：const [count, setCount] = useState(0);
3、在 JSX 中显示状态值：{count}
4、通过事件处理函数更新状态，例如点击按钮时递增：setCount(count + 1);
二、使用 useEffect 执行副作用操作
useEffect 用于在函数组件中执行副作用逻辑，如数据获取、订阅或手动 DOM 操作。它接收一个函数作为参数，在组件挂载、更新和卸载时按需执行。
1、在组件顶部导入 useEffect：import { useEffect } from 'react';
2、在组件内部调用 useEffect，传入副作用函数：useEffect(() => { console.log('组件已渲染'); });
3、若仅需在挂载时执行一次，传入空数组作为第二个参数：useEffect(() => { fetchData(); }, []);
4、若需响应某个状态变化而执行，将该状态放入依赖数组：useEffect(() => { document.title = `计数：${count}`; }, [count]);
三、组合 useState 和 useEffect 实现数据加载
常见场景是组件初始化时请求远程数据，并将结果保存到状态中。此时需用 useState 存储数据，用 useEffect 触发请求并更新状态。
1、声明数据状态和加载状态：const [data, setData] = useState(null); const [loading, setLoading] = useState(true);
2、在 useEffect 中发起 fetch 请求：useEffect(() => { fetch('/api/items').then(res => res.json()).then(setData).finally(() => setLoading(false)); }, []);
3、在 JSX 中根据 loading 状态渲染不同内容：{loading ? 加载中... :
{item.name}
)}}
4、注意避免重复请求：确保依赖数组为空数组（[]），且未在每次渲染时创建新的函数或对象传入 useEffect。
四、清理副作用以防止内存泄漏
当 useEffect 中设置了定时器、事件监听器或 WebSocket 连接时，必须在组件卸载前清理它们，否则可能引发内存泄漏或状态更新错误。
1、在 useEffect 的回调函数中返回一个清理函数：useEffect(() => { const timer = setInterval(() => setCount(c => c + 1), 1000); return () => clearInterval(timer); }, []);
2、清理函数会在组件卸载前执行，也可在下一次 effect 运行前执行（当依赖变化时）。
3、确保清理函数中不引用已过期的状态值，必要时使用 useRef 保存最新值。
4、对事件监听器执行 removeEventListener，对订阅执行 unsubscribe，均应在返回的函数中完成。
