React Hooks 核心总结

React Hooks 是 React 16.8 引入的函数式组件增强特性，用于状态管理、副作用处理、逻辑复用等，使代码更简洁且易于维护。

一、常用 Hooks

0. useState
   o 作用：函数组件中管理状态。
   o 语法：const [state, setState] = useState(initialValue)
   o 注意：状态更新是浅比较，复杂对象需返回新对象以触发渲染。
1. useEffect
   o 作用：处理副作用（如数据请求、DOM 操作、订阅）。
   o 语法：useEffect(() => { ... }, [deps])
   o 无依赖：组件每次渲染后执行。
   o 空依赖 []：仅在挂载和卸载时执行。
   o 有依赖 [dep]：依赖变化时执行。
   o 清理函数：返回函数用于取消订阅等清理操作（如 clearInterval）。
2. useContext
   o 作用：跨组件层级共享状态，避免逐层传递 props。
   o 语法：const value = useContext(MyContext)
   o 搭配：需先用 React.createContext 创建上下文。
3. useReducer
   o 作用：复杂状态逻辑管理（类似 Redux）。
   o 语法：const [state, dispatch] = useReducer(reducer, initialArg)
   o 适用场景：状态逻辑涉及多子值或依赖前状态。
4. useMemo & useCallback
   o useMemo：缓存计算结果，避免重复计算。
   o 语法：const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])
   o useCallback：缓存函数，避免子组件不必要的渲染。
   o 语法：const memoizedFn = useCallback(() => { doSomething(a, b) }, [a, b])
   o 注意：依赖项数组需正确设置，否则可能引发闭包问题。
5. useRef
   o 作用：
0. 访问 DOM 元素：const ref = useRef(null); <div ref={ref} />
1. 保存可变值（类似类组件的实例变量），变更不会触发渲染。 o 语法：const refContainer = useRef(initialValue)
6. useLayoutEffect
   o 作用：与 useEffect 类似，但执行时机在 DOM 更新后、浏览器绘制前。
   o 适用场景：需同步读取 DOM 布局（如调整元素尺寸）。

二、其他 Hooks

0. useImperativeHandle
   o 作用：自定义通过 ref 暴露给父组件的实例值。
   o 语法：useImperativeHandle(ref, () => ({ focus: () => {} }))
   o 搭配：需与 forwardRef 一起使用。
1. useDebugValue
   o 作用：在 React 开发者工具中显示自定义 Hook 的标签。
   o 语法：useDebugValue(value, formatFn)

三、自定义 Hooks

o 定义：将组件逻辑提取为可复用的函数，命名以 use 开头（如 useFetch）。
o 示例：封装数据请求逻辑。

   function useFetch(url) {
     const [data, setData] = useState(null);
     useEffect(() => {
       fetch(url).then(res => res.json()).then(setData);
     }, [url]);
     return data;
   }

四、Hooks 使用规则

0. 顶层调用：只能在函数组件或自定义 Hook 的顶层调用，不可在条件、循环中调用。
1. 命名规范：自定义 Hook 必须用 useXxx 格式命名。
2. 依赖项：useEffect、useMemo、useCallback 需正确声明依赖项，避免遗漏或冗余。
3. ESLint 插件：使用 eslint-plugin-react-hooks 自动检查规则。

五、最佳实践

o 逻辑拆分：将复杂组件拆分为多个 Hooks，提升可读性（如 useUserData、useWindowResize）。
o 避免滥用：useMemo/useCallback 仅在性能瓶颈时使用，过度使用可能增加内存开销。
o 闭包陷阱：在异步操作中访问最新状态时，使用 useRef 保存可变值或通过 setState 函数式更新。

六、对比类组件优势

o 简化代码：无需 this，避免生命周期方法分散逻辑（如 componentDidMount、componentDidUpdate）。
o 逻辑复用：自定义 Hook 替代 HOC 或 Render Props，减少嵌套。
o 函数式友好：更贴合现代 JavaScript 的函数式编程风格。

通过合理使用 Hooks，可以构建更清晰、可维护性更高的 React 应用。