为什么react要引入hook?

记得初次学react时，学到hook的时候讲到了hook的设计初衷，但是当时的学习资料只是很简单的提了下便过去了。

正好最近在写一个项目又用到了很多hook，于是去react的官方翻阅了一下hook设计初衷，觉得很有启发，于是用自己的理解来把hook设计者的设计初衷表述下，希望对大家能有启发，如有不对请指正。

官网讲述hook的设计动机涉及到了三点，下面来一一谈论

每一点都会按照：官网解释 个人理解  的顺序展示

目录

省流总结：

1.在组件之间复用状态逻辑很难

1精简的个人理解：

2.复杂组件变得难以理解

2精简的个人理解：

3.难以理解的 class

3.精简的个人理解：

---

省流总结：

1. 复用一些行为比较困难。react中我们要复用组件很容易，但是要是向要复用比组件更小粒度的行为，比较困难。虽然render-props，高阶组件等会一定程度上可以解决，但是会形成”嵌套地狱“
2. 复杂组件难以理解。有时候一个逻辑紧凑的操作，不得不放在不同的生命周期函数中，需要相互关联和对照的代码被迫拆分。而不相关的代码却被放在一起（如放在同一个生命周期函数中），不利于逻辑上的理解
3. class组件的使用需要的学习成本比较大，并且规则相较于函数组件较多。hook让使用者用更简单的像使用class组件一样使用函数组件。

1.在组件之间复用状态逻辑很难

React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。如果你使用过 React 一段时间，你也许会熟悉一些解决此类问题的方案，比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。如果你在 React DevTools 中观察过 React 应用，你会发现由 providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”。尽管我们可以在 DevTools 过滤掉它们，但这说明了一个更深层次的问题：React 需要为共享状态逻辑提供更好的原生途径。

你可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷。

1精简的个人理解：

复用一些行为比较困难。react中我们要复用组件很容易，但是要是向要复用比组件更小粒度的行为，比较困难。虽然render-props，高阶组件等会一定程度上可以解决，但是会形成”嵌套地狱“

2.复杂组件变得难以理解

我们经常维护一些组件，组件起初很简单，但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。例如，组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。但是，同一个 componentDidMount 中可能也包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除。相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。

在多数情况下，不可能将组件拆分为更小的粒度，因为状态逻辑无处不在。这也给测试带来了一定挑战。同时，这也是很多人将 React 与状态管理库结合使用的原因之一。但是，这往往会引入了很多抽象概念，需要你在不同的文件之间来回切换，使得复用变得更加困难。

为了解决这个问题，Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态，使其更加可预测。

2精简的个人理解：

复杂组件难以理解。有时候一个逻辑紧凑的操作，不得不放在不同的生命周期函数中，需要相互关联和对照的代码被迫拆分。而不相关的代码却被放在一起（如放在同一个生命周期函数中），不利于逻辑上的理解

hook将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。

3.难以理解的 class

除了代码复用和代码管理会遇到困难外，我们还发现 class 是学习 React 的一大屏障。你必须去理解 JavaScript 中 this 的工作方式，这与其他语言存在巨大差异。还不能忘记绑定事件处理器。没有稳定的语法提案，这些代码非常冗余。大家可以很好地理解 props，state 和自顶向下的数据流，但对 class 却一筹莫展。即便在有经验的 React 开发者之间，对于函数组件与 class 组件的差异也存在分歧，甚至还要区分两种组件的使用场景。

另外，React 已经发布五年了，我们希望它能在下一个五年也与时俱进。就像 Svelte，Angular，Glimmer等其它的库展示的那样，组件预编译会带来巨大的潜力。尤其是在它不局限于模板的时候。最近，我们一直在使用 Prepack 来试验 component folding，也取得了初步成效。但是我们发现使用 class 组件会无意中鼓励开发者使用一些让优化措施无效的方案。class 也给目前的工具带来了一些问题。例如，class 不能很好的压缩，并且会使热重载出现不稳定的情况。因此，我们想提供一个使代码更易于优化的 API。

为了解决这些问题，Hook 使你在非 class 的情况下可以使用更多的 React 特性。 从概念上讲，React 组件一直更像是函数。而 Hook 则拥抱了函数，同时也没有牺牲 React 的精神原则。Hook 提供了问题的解决方案，无需学习复杂的函数式或响应式编程技术。

3.精简的个人理解：

class难以理解。class组件的使用需要的学习成本比较大，并且规则相较于函数组件较多。所以hook让使用者用更简单的像使用class组件一样使用函数组件。