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 中没有生命周期钩子函数，你齐全能够本人去设计组织你的逻辑！

欢送交换

集体读书公众号，欢送交换！