为什么会有 React-Hooks

React-Hooks 是什么？它是因为什么原因出现的？

• React-Hooks 是一系列能够使函数式组件更强大、更灵活的“勾子”，（至于说这个“勾子”，我的理解是这样的：用户编写好相关的逻辑代码传入框架，之后由框架在适当的时机调用）；

• React-Hooks 出现的原因自然是为了丰富函数式组件的功能，使函数式组件在一定程度上具有替换类组件的能力。

那 React 为什么那么推崇函数式组件呢？相对于类组件，函数式组件有以下几个特点。

1. 函数式组件更符合函数式编程的理念；
2. 函数式组件更轻量，一般情况下，实现同样功能的组件，用函数式比用类组件在代码量要少一半；
3. 函数式组件更容易实现状态逻辑的拆分与复用（比如自定义 Hooks）

如此看来，函数式组件加上 React-Hooks 就万能了，可以完全替代类组件了呗？目前暂时还不能！

• 类组件具有的功能毕竟大而全，函数式组件还不能完全覆盖，例如 getSnapshotBeforeUpdate 和 componentDidCatch 这两个功能。
• 如果用函数组件解决比较复杂的问题，业务逻辑的拆分和组合是个“技术活儿”，对开发者水平有要求。
• Hooks 在使用要严格的遵守特定规则，上手前有学习成本。

React-Hooks 的使用规则

• 只在 React 函数组件中使用

• 不要在循环、条件或者嵌套函数中使用，其实就是在初始渲染和更新渲染过程中要保证各 Hooks 的顺序一致性。

  如果一个组件中有多个 hook 那么在组件初始化后它们会以链表的形式被组织起来，后续组件更新的时候也会依次遍历这个链表，而一旦组件更新时的 hooks 顺序与链表中顺序不一致，则会出现“驴唇不对马嘴”的现象。