React Hooks：从"这啥玩意儿"到"真香"的完整心路历程

前端技术 Jun 22, 2026

从“这啥玩意儿”到“真香”的完整心路历程

还记得当年写 React Class Component 的日子吗？一个简单的按钮，要写 constructor、绑定 this、记 lifecycle 方法……代码还没跑起来，手指已经抽筋了。就像你妈让你收拾房间，你以为只需要扫个地，结果她告诉你先把衣柜里冬天的衣服全部叠好——对，Class Component 就是那个衣柜。

然后 Hooks 来了。江湖传言：这东西能让你用函数组件写出比你用 Class 更优雅的代码。当时的我：呵，又一个噗头。

useState：终于不用 setState 了

// 以前
this.state = { count: 0 }
this.setState({ count: this.state.count + 1 })

// 现在
const [count, setCount] = useState(0)
setCount(count + 1)

看到区别了吗？少写了一个 this！少写了！一个！this！如果你还没感受到这个幸福感，说明你还没被 Class Component 里的 this 绑定折磨过。相信我，等你在 constructor 里写了三遍 .bind(this) 之后，你会回来哭的。

useEffect：ComponentDidMount/Update/WillUnmount 三合一

以前如果你要在组件加载时发请求、更新时做日志、卸载时清理定时器……你的代码会长这样：一套 lifecycle 方法各写各的，逻辑分散得像你周末的注意力。

现在 useEffect 一把梭：

useEffect(() => {
  fetchData()
  return () => cleanup()
}, [])

依赖数组传空 = mount 时跑一次。传 [变量] = 变量变了再跑。不传 = 每次渲染都跑（劝你别这么干，除非你家里有矿不在乎性能）。

自定义 Hook：代码复用的终极形态

以前你要复用逻辑，得搞高阶组件 (HOC) 或者 render props。写出来的代码嵌套得像俄罗斯套娃，调试的时候你根本分不清哪个括号是哪个组件的。

现在？写个函数，里面用 Hook，完事。你甚至可以搞一个 useWindowSize、useMousePosition、useLocalStorage……想要什么 Hook 自己造。就像乐高，只不过拼出来的是代码而不是城堡。

总结

Hooks 不是银弹，但它确实让 React 写起来更爽了。如果你还在用 Class Component，我建议你试试——反正又不要钱。就像我第一次吃螺虹粉：闻着不哎地，吃了就回不去了。

Tags

Zhaobin

Recommended for you