React的Hooks是什么？

Hook 就是 JavaScript 函数 他让函数组件拥有生命周期和状态等，原本 在Class 组件中才提供的功能

这篇文章主要是介绍 可以访问我另一篇博客有 Hooks的具体使用

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

但是使用它们会有两个额外的规则：

• 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
• 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。

Hooks 前后，组件开发模式的对比

• React v16.8 以前： class 组件(提供状态) + 函数组件(展示内容)
• React v16.8 及其以后：

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

class 组件自身的问题

在根据状态来渲染UI这件事上，class 组件并没有发挥它最重要的功能：

• 组件之间很少继承
• 组件之间很少相互访问

函数式组件的好处

1. 函数本身比较简单，更好的胜任根据状态来渲染UI这件事
2. hooks让函数组件内部有了维护状态的能力
3. hooks带来了组件的逻辑复用能力