思维导图

React组件的本质

React 组件的模型是从 Model（state 和 props） 到 View 的映射。

单向数流

React使用的是声明式编码。在过去我们要去使用浏览器API去操作真实DOM，现在使用jsx语法糖可以声明式编码。将数据和UI进行绑定，只要数据发生变化就会重新渲染UI。不用去关注细节。

数据绑定 ：当 Model 中的状态发生变化 时，UI 会自动变化。

类组件没有被“榨干”

实例

所有 UI 都是由状态驱动的，因此很少会在外部去调用一个类实例（即组件）的方法。要知道，组件的所有方法都是在内部调用，或者作为生命周期方法被自动调用的。

所有的 UI 都是声明出来的，不用处理细节的变 化过程。因此，通过函数去描述一个组件才是最为自然的方式。

继承

React 组件之间是不会互相继承的。大多组件最常用的都是使用组合。

函数组件的缺陷

函数组件是无状态组件

函数组件无法存在内部状态，必须是纯函数，而且也无法提供完整的生命周期机制。

Hooks诞生

函数没有状态，为了让函数拥有状态就添加了一个空间存状态数据来和函数组件进行绑定。

函数和对象不同，并没有一个实例的对象能够在多次执行之间保存状态，那势必需要一个函数之外的空间来保存这个状态，而且要能够检测其变化，从而能够触发函数组件的重新渲染。

Hooks机制

能够把一个外部的数据绑定到函数的 执行。当数据变化时，函数能够自动重新执行。这样的话，任何会影响 UI 展现的外部数据，都可以通过这个机制绑定到 React 的函数组件。

在 React 中，Hooks 就是把某个目标结果钩到某个可能会变化的数据源或者事件源上，那么当被钩到的数据或事件发生变化时，产生这个目标结果的代码会重新执行，产生更新后的结果。

Hook优势

逻辑复用

Hooks 的思想其实 不仅可以用在 React，在其它一些场景也可以被利用。

高阶组件会产生冗余的组件节点，让调试变得困难。使用Hooks可以大大简化。高阶组件几乎是 Class 组件中实现代码逻辑复用的唯一方式，这样会产生额外的组件节点，但是Hooks不会产生额外的组件节点。

关注分离

通过 Hooks 的方式，把业务逻辑清晰地隔离开，能够让代码更加容易理解和维护。

特别是useEffect钩子，基本上代替了3个生命周期（componentDidMount，componentDidUpdata，componentWillUnmount）。一个钩子里面可以写不同时期的执行代码，让业务代码更加集中了。

参考

《React Hooks 核心原理与实战》