React_Hooks 设计动机和工作模式#

设计动机#

• 为什么需要 React-Hooks？
• 什么是类组件、函数组件？有何区别？

类组件#

基于 ES6 Class 这种写法，通过继承 React.Component 得来的 React 组件。

函数组件/无状态组件#

以函数形式存在的 React 组件。

早期并没有 Hooks 加持，内部无法定义和维护 state，又称为 无状态组件。

类比 FC & CC#

• 类组件需要继承 class，函数组件不需要
• 类组件可以访问生命周期方法，函数组件不行
• 类组件中可以获取到实例化之后的 this，函数组件不行
• 类组件内部可以定义和维护 state，函数组件不行

以上是否意味着 类组件一定比函数组件 更好呢？

类组件：重装战舰#

类组件是面向对象编程思想的一种表征。

1. 封装：将一类属性和方法，集中到一个 Class 中去。
2. 继承：类可以继承 现有类，实现对某一类属性和方法的复用。

类组件中预置了相当多的东西，需要去制定，state 和 生命周期 就是其中的典型。

当实现一个简易的组件时，类组件相对于真正的 组件代码，显得非常笨重。

由于封装的存在，组件与组件之间可能有些强关联，内部逻辑难以拆分和复用。

使用 高阶组件、Render Props 等能解决上面问题，但是需要一定的学习成本。

函数组件：轻巧快艇#

函数组件在写法上是轻量、灵活、易于组织和维护的。

函数组件会捕获 render 内部的状态。

函数组件更加契合 React 框架的设计理念。

UI = render(data) || UI = f(data)

React 组件本身定位就是函数，一个接受数据、生成 UI 的函数。

Hooks 本质：一套能够使函数组件更强大、更灵活的钩子#

前面说到，函数组件比类组件缺少了很多东西，如 state、生命周期等。

Hooks 出现就是为了帮助函数组件补齐这些缺失的能力。

允许函数组件自由的选择使用，制定出最合适的函数组件。

工作模式#

核心 API#

• useState(): 引入状态 state
• useEffect(): 副作用，可以在此实现 componentDidMount、componentDidUpdate、componentWillUnmount 里面做的事，如 DOM 操作、订阅事件、调用外部 API