useState 的三种用法
直接初始化值const [state, setState] = useState(initialState)
惰性初始化（计算复杂值）const [todos, setTodos] = useState(() => loadTodosFromStorage())
基于前值更新（避免异步闭包问题）setTodos((prevTodos) => [...prevTodos, newTodo])
useContext 状态共享
父组件
通过Context.Provider提供value或方法
子组件
通过createContext创建句柄直接访问/更新父组件状态
本质
避免逐层传递 props，实现跨组件状态管理
useReducer 适用场景
- 管理复杂状态逻辑
- 合并多个关联的
useState更新 - 减少分散的
setState调用
useEffect 依赖项控制
空数组[]
仅在组件挂载时执行一次
指定依赖[a, b, c]
当a、b或c变化时触发
无依赖null
每次渲染后都执行
分离依赖与最新值
结合useEffectEvent处理部分逻辑
闭包陷阱解决方案
问题
异步操作中无法获取最新状态
解决
- 使用
useRef保存可变值 - 使用
useEffectEvent封装逻辑
性能优化协作模式
子组件
用React.memo包裹，避免不必要的渲染
父组件传递 props 优化
- 数据属性：用
useMemo缓存 - 回调函数：用
useCallback缓存
