RN/hook/TS

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缓存