React Hooks

前言

• React中组件分为两大类：Class类式组件、函数式组件

React v16.8以前：

Class类式组件实例的三个核心属性：state、props、refs（主流）

函数式组件：props （没有state状态，功能有限）

React v16.8以后：

Hooks的出现，自此，函数组件成为 React 的新宠儿。

---

一、Hooks 是什么

Hooks(钩子) 是 React v16.8 中的新增功能 ，只能在函数组件中使用

作用：

• 为函数组件提供状态、生命周期等原本 class 组件中提供的 React 功能

• 可以理解为通过 Hooks 为函数组件钩入 class 组件的特性

React v16.8 版本前后，组件开发模式的对比：

• React v16.8 以前： class 组件(提供状态) + 函数组件(展示内容)
• React v16.8 及其以后：
  1. class 组件(提供状态) + 函数组件(展示内容)
  2. Hooks(提供状态) + 函数组件(展示内容)
  3. 混用以上两种方式：部分功能用 class 组件，部分功能用 Hooks+函数组件

注意1：虽然有了 Hooks，但 React 官方并没有计划从 React 库中移除 class。

注意2：有了 Hooks 以后，不能再把函数组件称为无状态组件了，因为 Hooks 为函数组件提供了状态。

二、Hooks的产生

两个角度：组件的状态逻辑复用、class 组件自身的问题

1. 组件的状态逻辑复用：
   • 在 Hooks 之前，组件的状态逻辑复用经历了：mixins（混入）、HOCs（高阶组件）、render-props 等模式。
   • mixins 的问题：1 数据来源不清晰 2 命名冲突。（早已废弃）
   • HOCs、render-props 的问题：重构组件结构，导致组件形成 JSX 嵌套地狱问题。
2. class 组件自身的问题：
   • 需要理解 class 中的 this 指向
   • class组件和生命周期息息相关，一个功能相互关联且需要对照修改的代码被拆分到不同生命周期函数中
     • componentDidMount -> window.addEventListener('resize', this.fn)
     • componentWillUnmount -> window.addEventListener('resize', this.fn)

三、hooks的优势

• 两大优点：同一个功能的代码集中、不需要考虑this指向（函数式组件里面没有this）

由于原来 React 中存在的问题，促使 React 需要一个更好的自带机制来实现组件状态逻辑复用。

从开发者角度：

1. 语法更简单。
2. 组件的解构更加清晰明了，按功能进行代码分区。
3. 没有class类式组件中的生命周期。
4. 避免了class类式组件的class语法和相关API，纯函数，要求更低。
5. 复用组件状态逻辑，而无需更改组件层次结构。

从项目角度：

1. 具有更好的 TS 类型推导。
2. tree-shaking 友好，打包时去掉未引用的代码。
3. 更好的压缩。

项目开发中，Hooks 的采用策略：

• 不推荐直接使用 Hooks 大规模重构现有组件
• 推荐：新功能用 Hooks，复杂功能实现不了的，也可以继续用 class
• 找一个功能简单、非核心功能的组件开始使用 hooks