告别类组件：深入浅出 React Hooks 核心原理与实战技巧

React 16.8 的发布是一个里程碑，它引入的 Hooks 彻底改变了我们编写 React 组件的方式。曾经，我们在类组件的生命周期方法中纠缠不清，在 HOC（高阶组件）和 Render Props 的“嵌套地狱”里艰难跋涉。Hooks 的出现，不仅让我们能在函数组件中“钩入”状态和生命周期特性，更让逻辑复用变得前所未有的简单。

一、Hooks 的本质：为什么我们需要它？

在 Hooks 诞生之前，类组件面临着几个难以忽视的痛点。首先，组件逻辑难以复用。为了复用状态逻辑，我们被迫使用 HOC 或 Render Props，这导致代码结构变得层层嵌套，形成了所谓的“装饰器地狱”。其次，复杂的组件变得难以理解。生命周期方法如 componentDidMount、componentDidUpdate 往往包含不相关的逻辑，比如数据获取和事件监听混在一起，拆分起来非常困难。

Hooks 的核心设计理念是“关注点分离”。它允许我们将组件内部的状态逻辑按照功能而非生命周期进行拆分，让代码更加扁平、内聚。

二、核心基石：useState 与闭包陷阱

useState 是最基础的 Hook，它让函数组件拥有了“记忆”状态的能力。虽然使用简单，但其背后的原理却涉及 React Fiber 架构的调度机制。

const [count, setCount] = useState(0);

这里有一个新手常犯的错误——闭包陷阱。在函数组件中，每一次渲染都是一次独立的函数调用。如果你在 useEffect 或事件处理中直接引用了旧的状态变量，由于闭包的缘故，你获取的可能永远是初始值。

解决这一问题的关键在于理解 setState 的函数式更新：setCount(prev => prev + 1)。这种方式确保了我们总是基于最新的状态进行计算，避免了闭包带来的陈旧引用问题。

三、生命周期终结者：useEffect 的全能替代

useEffect 是 Hooks 中最强大的工具，它统一了 React 类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount。

useEffect(() => {
  // 副作用逻辑
  document.title = `Clicked ${count} times`;

  return () => {
    // 清除函数
    console.log('Cleanup');
  };
}, [count]); // 依赖数组

理解 useEffect 的关键在于依赖数组。React 会对比依赖项是否发生变化，从而决定是否重新执行副作用。更重要的是，useEffect 的返回函数（清理函数）会在组件卸载或下一次 Effect 执行前调用，这对于清除定时器、解绑事件监听器至关重要。

四、进阶实战：自定义 Hook 与逻辑复用

Hooks 真正的威力在于自定义 Hooks。通过将状态逻辑提取到一个函数中，我们可以在不同组件间共享状态逻辑，而无需改变组件层级结构。

例如，我们可以封装一个 useWindowSize Hook 来监听窗口大小变化：

function useWindowSize() {
  const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });

  useEffect(() => {
    const handleResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

这种模式极大地提高了代码的可测试性和可维护性。我们不再关注“如何复用组件”，而是关注“如何复用逻辑”。

五、性能优化的双刃剑：useMemo 与 useCallback

在追求性能优化的路上，useMemo 和 useCallback 是不可或缺的工具。它们分别用于缓存计算结果和函数引用。

然而，盲目使用这两个 Hook 往往会适得其反。由于缓存本身也需要内存开销，且依赖数组的比较也需要时间，只有在处理昂贵的计算（如大数组排序）或传递给纯子组件的引用时，才应该考虑使用它们。记住：过早优化是万恶之源。

结语

React Hooks 不仅仅是一套新的 API，它是一种全新的思维方式。它让我们从复杂的类组件样板代码中解脱出来，专注于业务逻辑本身。掌握 Hooks 的底层原理和最佳实践，不仅是写出优雅代码的关键，更是每一位 React 开发者进阶的必经之路。在未来的开发中，拥抱 Hooks，你会发现代码的世界变得更加清晰和高效。