浅谈react hooks

最近在项目中使用了react hooks, 总结了一些相关的知识点可以有助于我们更好地了解和使用react hooks。
本文并不涉及react hooks语法，用法等知识点，需要了解的可以移步官网，讲述的已经很详细了~

React hooks

首先，我们来看看react hooks是什么？
其实很简单， 它就是`可以在函数中勾入React的state和生命周期等特性的函数``。拆解一下就是，它是个函数，只是在这个函数中可以勾入react的相关特性。

使用hook的动机

那我们再来看看，为什么要使用hooks呢？ 它能帮我们解决哪些问题？

1. 逻辑之间复用状态复杂：
2. 嵌套地狱，使得组件业务逻辑复杂
3. 使用class让人难以理解： 生命周期函数经常包含不相关的逻辑，但又把相关逻辑分离到几个不同方法中。hook允许我们按照代码的用途分离他们。React将按照effect声明的顺序依次调用组件中的每一个effect。
4. 热重载不稳定，影响component folding的性能

使用hook的规则

1. 只在最顶层使用hook(不要在什么条件函数或者循环里面嵌套, 否则有可能会破坏useState的执行顺序，导致React会因为hook的调用顺序不同而不知道每一个useState对应哪一个state)。
2. 只在React函数中调用hook。

使用hook时需要注意的点

1. hook不能在class中使用
2. hook只能在最外层调用。不要在循环、条件判断或者子函数中调用。
3. 只能在React的函数组件中调用hook。不要在其他js函数中调用。（或者在自定义hook中调用）。
4. hook是一种复用状态逻辑的方式，它不复用state本身。hook的每次调用都有一个完全独立的state。因此可以在单个组件中多次调用同一个自定义hook。
5. hook使用了JavaScript的闭包机制，而不用在javaScript已经提供了解决方案的情况下，还引入特定的React API。
6. react保证了每次运行effect的同时，DOM都已经更新完毕。

自定义hook

如果函数的名字以use开头，并调用其他hook, 我们就说这事一个自定义hook。 useSomthing的命名约定可以让我们的linter插件在使用hook的代码中找到bug。
两个组件中使用相同的hook不会共享state。
自定义hook是一种重用状态逻辑的机制，所以每次使用自定义hook时，其中所有的state和副作用都是完全隔离的。

useState

在hook的useState中，setState和class中的setState的不同是：
不会把新的state和旧的state合并，而是直接替换（所以写数组和对象时不用考虑引用？）
如果effect返回一个函数，React将会在执行清除操作时调用它（清除操作发生在什么时候？组件卸载的时候？）
effet的清除阶段在每次重新渲染时都会执行，而不是只在卸载组件的时候执行一次。

useEffect

相当于替代componentDidMount, componentDidUpdate(忘记正确地处理该生命周期函数是React应用中常见的bug来源), componentWillUnmount等生命周期。它是通过函数副作用实现的。

React中的副作用指的是：

1. 数据获取
2. 设置订阅
3. 手动更改React组件中的DOM

以上都属于副作用。
react中有两种常见的副作用操作： 需要清除和不需要清除的。
不需要清除的场景你自己知道
如果订阅了外部数据源，一定要清除effect,可以防止引起内存泄漏。
这个函数告诉React组件需要在渲染后执行某些操作。React会保存你传递的函数，并且在执行DOM更新之后调用它。
但与生命周期不同的是： 使用useEffect调度不会阻塞浏览器更新屏幕。
每次渲染后都执行清理或者执行effect可能会导致性能问题，所以可以给useEffect传参，对比preState。

reference

在学习hooks的时候参考的一些网站~
官网
hook如何fetch data
when to useMeme and useCallback
react hooks中的一些格式插件eslint-plugin-react-hooks
react hooks中的一些格式插件exhaustive-deps