Hook 简介

Hook 是什么

Hook 是 React 16.8.0 的新特性。

Hook 是钩子函数,通过使用 Hook 可以在 函数组件 中引入 React state生命周期 等特性,它可以让我们在不编写 class 的情况下使用 state 及其他的 React 特性。

Hook 可以解决什么问题

Hook 可以解决如下问题:

  • 组件间复用状态逻辑困难

    ​ React 之前用 render props高阶组件 解决此问题,但需要重新组织组件结构。现在可以使用 Hook 在无需修改组件结构的情况下复用状态逻辑

  • 复杂组件越来越难以理解

    ​ 之前在不同的生命周期中维护的逻辑关联的代码,现在可以使用 Hook 将组件中逻辑关联的部分拆分成更小的函数(比如设置订阅或请求数据)。还可以使用 reducer 来管理组件的内部状态,使其更加可预测。

  • 避开 class

    ​ js 中的 class 和其他语言中的 class 有很大区别,特别是 this 的工作方式,编写 React 组件时,需要额外编写 this 和事件处理器的绑定,而这些代码其实非常冗余。

    ​ class 不能很好的压缩,会使得热加载出现不稳定的情况。

    Hook 能够使你避开 class 也能使用更多的 React 特性。

Hook 对现有代码的影响

  • 可选功能
    • 无需重写现有代码即可使用 Hook
    • 不是非得用 Hook 不可,如果不想也可以不用
  • 100% 向后兼容
  • 可用版本
    • 从 React 16.8.0 版本之后可以使用 Hook