用Hook替代Class编写React组件的原因

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性（并被官方解读为这是下一个 5 年 React 与时俱进的开端）。

推荐阅读文章：
Why React Hooks? 深入浅出讲解为啥你应该使用 react hooks
函数式组件与类组件有何不同？一句话概括这篇文章：函数组件会捕获 render 内部的状态，这是两类组件最大的不同
useEffect 完整指南 React 团队核心成员 Dan Abramov 关于 useEffect API 的详细介绍与示例。

使用 Hook 有一段时间了，更能理解 React 为什么要添加新的原生概念。
Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。

使状态逻辑复用变得简单可行

Q：
React 没有提供将可复用性行为“附加”到组件的途径。
在 React 中共享组件之间的状态逻辑，目前有两种主流的方案： render props 和高阶组件（但是这类方案需要重新组织你的组件结构，使代码难以理解）。
A：
Hook 让 React 为共享状态逻辑提供了更好的原生途径——通过自定义 Hook（其名称必须以 “use” 开头），可以将组件状态逻辑提取到可重用的函数中，使得这些逻辑可以单独测试并复用，且使你在无需修改组件结构的情况下复用状态逻辑。
（两个函数之间共享逻辑时，会提取到第三个函数中。而函数组件和 Hook 都是函数，所以同理可的）

简化生命周期

Q：
组件的生命周期常常包含一些不相关的逻辑（同一个 componentDidMount 中可能包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除）。
相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。在多数情况下，不可能将组件拆分为更小的粒度，因为状态逻辑无处不在。因此很容易导致逻辑不一致，并且产生 bug。
A：
通过使用 Hook，解决 class 中生命周期函数经常包含不相关的逻辑，但又把相关逻辑分离到了几个不同方法中的问题—— Hook 允许我们按照代码的用途分离它们，可以把组件内相互关联的副作用组织在一起（例如创建订阅及取消订阅），而并非强制按照生命周期划分，同时让相关的代码关联更加紧密，帮助我们避免一些 bug。
（useEffect 是一个 Effect Hook，它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API）

告别难以理解的 Class（this 的模糊性）

Q：
学习 Class 的成本，必须去理解 JavaScript 中 this 的工作方式，为了解决 this 不符合预期的问题，还必须用 bind 或箭头函数。
A：
Hook 使你在非 class 的情况下可以使用更多的 React 特性。函数组件更加契合 React 框架的设计理念，而 Hook 则拥抱了函数，同时也没有牺牲 React 的精神原则。

Hook 的局限性

Hooks 暂时还不能完全地为函数组件补齐类组件的能力：比如 getSnapshotBeforeUpdate、componentDidCatch 这些生命周期。
Hooks 在使用层面有着严格的规则约束，两个额外的规则：
1.只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
（组件首次渲染时，内部将初始化一个「记忆单元格」列表，用来存储一些数据的 Js 对象。当调用一个 Hook 的时候，它会读取当前的单元格，然后把指针移动到下一个，所以要保证每次 Hook 数量一致，位置相同。）
2.只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中）

未来趋势

React 团队对时间切片与并发模式探索，以及考虑性能的进一步优化与组件间更合理的代码拆分结构后，认为类组件的模式并不能很好地适应未来的趋势。（由于生命周期带来的复杂度，并不易于优化）
而使用 Hooks 的函数组件可以提供比原先更细粒度的逻辑组织与复用，且能更好地适用于时间切片与并发模式，更能适应 React 的未来发展。

最后

最后提一下一个小点。

问：React 中函数式组件和类组件之间的巨大差别是什么？
答：函数式组件捕获了渲染所使用的值。

参考链接：
https://react.docschina.org/docs/hooks-intro.html