React Hooks 使用总结

React Hooks 使用总结

React Hooks 作为官方推荐的 React 打开方式，是否真的很香？我经过在项目中不断使用后，觉得 Hooks 是真香，不过过程中踩过的坑也不少，需要不断总结才能用好它，下面总结了一些使用经验。

引言

Hooks 组件其实是能力更强的函数式组件，函数式组件大家应该都用过，也可能用过并没有觉察到，我举几个例子：

• 类组件中，我们经常会把 render 方法中的某些模块抽象出来，比如：循环列表，我们可以直接写在 render 方法的 jsx 中，不过抽出一个方法，把 list 数据传过去，在方法中循环生成 jsx 返回来，代码更清晰，复用性更好。
• 更进一步，我们可以把通用的渲染方法放到父组件，供所有子组件复用。
• 再进一步，直接就写成一个纯函数，复用性更好，其他组件都可以来复用它。这个独立的渲染函数在 React 里面就是一个函数式组件，它就是一个组件，不过它没有对象实例、对象属性和对象方法。

Hooks 组件其实就是函数式组件，不过它是增强版的，它有状态，并且可以在状态变化的时候做一些响应处理。

Hooks 组件的重要特点

看完引言，不知道大家有没有抓到重点，我来总结一下（个人经验）：

• 首先，最根本的区别：函数式组件没有对象实例、对象属性和对象方法。这点很重要，很多 Hooks 组件的特殊性就因此而来。
• 其次，Hooks 组件和函数式组件的区别：Hooks 有状态，并且可以定义状态响应逻辑，Hooks 中叫副作用(Effect)。
• 然后，Hooks 组件没有生命周期钩子，不过我们可以通过状态响应去实现大部分钩子函数同等的效果（参阅官方文档）。
• 最后，要注意 Hooks 组件中的闭包。这里容易掉坑！

Hooks 为什么香

Hooks 刚出来时，这个问题就是大家最关心的，官方也有两点说明，不过这两点也需要大量实践和总结才会深有感受。

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

引言中有说到复用：抽取类方法、抽取父类方法、抽取纯函数组件。

• 抽取类方法和父类方法，存在的问题是，只有这类组件或这类父子组件可以复用。而且，抽取父类方法还会面临子类继承时，错误覆盖的问题。
• 抽取纯函数组件，这种方式其实挺好的，不过只适合纯逻辑的抽取，因为它没有状态，只有 props, 很多场景满足不了需求。 如果我想写一个定时器，还得使用者来定义计数状态，这个就不符合解耦原则了，而且也没有生命周期钩子，我无法在组件卸载时把定时器关掉。

然而，Hooks 解决了纯函数组件的这些难题，同时还保持了纯暗示组件的优点。

类组件中也有解决方案：render props 和 高阶组件，不过使用起来很麻烦，且难以理解。

复杂组件变得难以理解

类组件的常规做法就是：在 didMount 中去做 数据请求、事件监听的绑定、定时器的初始化等操作，然后又要在 willUnmount 中去清除掉它们。这些不相关的逻辑被强行杂糅进生命周期钩子函数中了，这会让测试和阅读都有困难。

Hooks 中没有生命周期钩子函数，你完全可以自己去设计组织你的逻辑！

欢迎交流

个人读书公众号，欢迎交流！