纵有疾风起
人生不言弃

用Hook替代Class编写React组件的原因

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

使用 Hook 有一段时间了,更能理解 React 为什么要添加新的原生概念。

Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。(Hook 不能在 class 组件中使用)

组件之间复用状态逻辑
  • Q:
    React 没有提供将可复用性行为“附加”到组件的途径。
    在 React 中共享组件之间的状态逻辑,目前有两种主流的方案: render props高阶组件(但是这类方案需要重新组织你的组件结构,使代码难以理解)。

  • A:
    Hook 让 React 为共享状态逻辑提供了更好的原生途径——通过自定义 Hook(其名称必须以 “use” 开头),可以将组件状态逻辑提取到可重用的函数中,使得这些逻辑可以单独测试并复用,且使你在无需修改组件结构的情况下复用状态逻辑。
    (两个函数之间共享逻辑时,会提取到第三个函数中。而函数组件和 Hook 都是函数,所以同理可的)

简化生命周期
  • Q:
    组件的生命周期常常包含一些不相关的逻辑(同一个 componentDidMount 中可能包含很多其它的逻辑,如设置事件监听,而之后需在 componentWillUnmount 中清除)。
    相互关联且需要对照修改的代码被进行了拆分,而完全不相关的代码却在同一个方法中组合在一起。在多数情况下,不可能将组件拆分为更小的粒度,因为状态逻辑无处不在。因此很容易导致逻辑不一致,并且产生 bug。

  • A:
    通过使用 Hook,解决 class 中生命周期函数经常包含不相关的逻辑,但又把相关逻辑分离到了几个不同方法中的问题—— Hook 允许我们按照代码的用途分离它们,可以把组件内相互关联的副作用组织在一起(例如创建订阅及取消订阅),而并非强制按照生命周期划分,同时让相关的代码关联更加紧密,帮助我们避免一些 bug。
    (useEffect 是一个 Effect Hook,它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途,只不过被合并成了一个 API)

其他

Hook 就是 JavaScript 函数,但是使用它们会有两个额外的规则:

  • 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
    (组件首次渲染时,内部将初始化一个「记忆单元格」列表,用来存储一些数据的 Js 对象。当调用一个 Hook 的时候,它会读取当前的单元格,然后把指针移动到下一个,所以要保证每次 Hook 数量一致,位置相同。)
  • 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。(还有一个地方可以调用 Hook —— 就是自定义的 Hook 中)

文章转载于:https://www.jianshu.com/p/26f7f647e14a

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 用Hook替代Class编写React组件的原因

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活