react.js为什么要用钩子

在 React 中引入 Hooks（钩子），主要是为了解决早期 class 组件 在开发和维护中的一些痛点，同时让函数组件拥有更完整的能力。

下面从为什么要用的角度来讲，比较直观：

1️⃣ 让函数组件也能“有状态、有生命周期”

在 Hooks 出现之前：

• 函数组件：只能接收 props，不能保存状态
• class 组件：才能用 state、componentDidMount 等

Hooks 出现后：

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

✅ 函数组件也能：

• 管理状态（useState）
• 处理副作用（useEffect）
• 使用上下文（useContext）

2️⃣ 解决 class 组件的复杂问题

class 组件常见痛点

• this 指向混乱
• 逻辑分散（生命周期里堆很多不相关的代码）
• 复用状态逻辑困难（HOC / render props 很绕）

例如：

componentDidMount() {
  // 获取数据
}
componentDidUpdate() {
  // 获取数据
}

用 Hook 更清晰：

useEffect(() => {
  fetchData();
}, []);

3️⃣ 更容易复用状态逻辑

以前复用逻辑要靠：

• 高阶组件（HOC）
• Render Props

现在可以直接抽 Hook：

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handler = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return width;
}

✅ 任何组件都能直接用：

const width = useWindowWidth();

4️⃣ 更符合“函数式”思维

React 本身强调：

UI = f(state)

Hooks 让组件：

• 更像一个普通函数
• 更容易测试
• 更容易理解

5️⃣ 官方推荐方向

React 官方明确：

• ✅ 未来主推函数组件 + Hooks
• ⚠️ class 组件不会立刻移除，但不再重点发展

一句话总结

React 用 Hooks，是为了让函数组件更强大、代码更简洁、逻辑更好复用，同时减少 class 带来的复杂性。

如果你愿意，我也可以：

• 用 class vs hooks 对比示例
• 或讲 最常用的 5 个 Hook 使用场景