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

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 使用 Hook 有一段时间了，更能理解 React 为什么要添加新的原生概念。 Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。（Hook 不能在 class 组件中使用） 组件之间复用状态逻辑 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） 其他 Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则： 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。 （组件首次渲染时，内部将初始化一个「记忆单元格」列表，用来存储一些数据的 Js 对象。当调用一个 Hook 的时候，它会读取当前的单元格，然后把指针移动到下一个，所以要保证每次 Hook 数量一致，位置相同。） 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中）

本文章由javascript技术分享原创和收集