React Hook - 简介
2022-02-08 本文已影响0人
前端小白的摸爬滚打
可以在不编写 class 的情况下使用 state 以及其他 React 特性
为什么要引入 hooks？
-
在组件之间复用状态逻辑很难。类组件中我们的状态复用只能通过高阶组件/render props 来实现。但是这种方式需要重新组织组件结构，会很麻烦而且使得代码变得难以理解。Hook 可以使你在无需修改组件结构的情况下复用状态逻辑。
-
复杂组件变得难以理解。一个组件最开始可能很简单，但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。相互关联且需要对照修改的代码被进行了拆分（在不同的生命周期中），而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。
-
难以理解的 class。我们需要学习 class。还必须去理解 JavaScript 中 this 的工作方式。还不能忘记绑定事件处理器。而Hook 使你在非 class 的情况下可以使用更多的 React 特性。
总结
这一章我们主要需要了解引入 Hooks 的原因：
-
class 组件状态逻辑复用困难
-
复杂组件难以理解。因为不想关的逻辑被写在同一个生命周期中而相关的逻辑却被拆分在不同的生命周期中
-
需要学习 class 和了解 this，成本较高
