React Hook:颠覆类组件的革命性创新

215 阅读2分钟

Hook 是 React 团队历经 5 年,综合各种开发问题,提供的一系列钩子函数。

Hook 出现之前,类组件主要有下面 3 个问题

  1. 逻辑复用难,核心是各种设计模式,难理解。
  2. 生命周期中不相关的代码混在一起。
  3. 只能用类组件存储状态,添加和更新副作用,优化性能。

逻辑复用

Hook 出现之前,主要有两种复用的逻辑的办法,高阶组件和 Render Props。它们都是通过改变代码结构实现的,很难理解,写起来也很麻烦。

幸运的是,自定义 Hook 能提取共同的逻辑,不仅的复用,还能单独测试,和别人分享。

所以拥抱 Hook 吧,你再也不用写蹩脚的高阶组件,Render Props ,弄乱你的组件树了。

组织关联的代码

Hook 出现之前,经常要根据生命周期,在页面加载或更新的不同阶段,获取外部数据,订阅消息,定时器,然后又要在页面卸载或销毁时取消订阅,取消定时器。 然而生命周期函数初学者很容易错误的使用。不仅需要你充分理解生命周期,还把获取外部数据,订阅消息,定时器等不同的逻辑写在一块。

又幸运的是,使用 Hook 的 useEffect 能添加副作用,获取外部数据,用一个 useEffect 专门订阅消息,用一个 useEffect 专门写定时器。

如果不深入理解 useEffect,很容易用错。 关于 useEffect 的深入理解,请看 Dan 的useEffect 完整指南

所以拥抱 Hook 吧,基于生命周期的杂乱代码和基于依赖的关联代码,你学那个?

使函数组件替换类组件成为可能

Hook 出现之前,要在组件使用 state,必须写成类组件。

类组件需要理解 JavaScript 中的 this 概念,需要在 DOM 事件和各种异步回调函数中谨慎思考 this。 React 计划在未来进行编译优化,但使用类组件一些特性会对会让优化无效。相比之下函数组件则没有这些问题,而且更符合 React 哲学。

所以拥抱 Hook 吧, 函数组件相对类组件那么多额外的概念,而且面向未来。

总结

Hook 使得函数组件能轻松解决开发中的问题,存储状态,更新副作用,逻辑复用,性能优化。函数组件可以完全替换类组件。如果开发新的功能,建议直接使用函数组件。实际上 Hook 使得类组件变得多余,是颠覆类组件的革命性创新。