ahooks控制时机的hook实现方法.docxVIP

第

ahooks控制时机的hook实现方法

目录引言FunctionComponentVSClassComponentClassComponentFunctionComponentLifeCycle-生命周期useMountuseUnmountuseUnmountedRefEffectuseUpdateEffect和useUpdateLayoutEffectuseDeepCompareEffect和useDeepCompareLayoutEffectuseUpdate总结与思考

引言

本文是深入浅出ahooks源码系列文章的第五篇，这个系列的目标主要有以下几点：

加深对Reacthooks的理解。学习如何抽象自定义hooks。构建属于自己的Reacthooks工具库。培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。

注：本系列对ahooks的源码解析是基于v3.3.13。自己folk了一份源码，主要是对源码做了一些解读，可见详情。

本文来探索一下ahooks是怎么封装React的一些执行时机的？

FunctionComponentVSClassComponent

学习类似React和Vue这种框架，对它们生命周期的掌握都是必须的，我们需要清楚的知道我们代码的执行顺序，并且在不同的阶段执行不同操作的代码，比如需要挂载完成之后才去获取dom的值，否则可能会获取不到相应的值。

ClassComponent

使用过React的ClassComponent的同学，就会知道其组件生命周期会分成三个状态：

Mounting(挂载)：已插入真实DOMUpdating(更新)：正在被重新渲染Unmounting(卸载)：已移出真实DOM

简单版如下所示：

其中每个状态中还会按顺序调用不同的方法，对应的详细如下（这里不展开说）：

可以通过官方提供这个网站查看详情

可以看到，会有非常多的生命周期方法，而且在不同的版本，生命周期方法还不同。

FunctionComponent

到了FunctionComponent，会发现没有直接提及生命周期的概念，它是更彻底的状态驱动，它只有一个状态，React负责将状态渲染到视图中。

对于FunctionComponent来说由状态到页面渲染只有三步：

输入状态（prop、state）执行组件的逻辑，并在useEffect/useLayoutEffect中订阅副作用输出UI（Dom节点）

重点是第二步，React通过useEffect/useLayoutEffect订阅副作用。ClassComponent中的生命周期都可以通过useEffect/useLayoutEffect来实现。它们两个的功能非常相似，我们这里看下useEffect。

使用useEffect相当于告诉React组件需要在渲染后执行某些操作，React将在执行DOM更新之后调用它。React保证了每次运行useEffect的时候，DOM已经更新完毕。这就实现了ClassComponent中的Mounting(挂载阶段)。

当状态发生变化的时候，它能够执行对应的逻辑、更行状态并将结果渲染到视图中，这就完成了ClassComponent中的Updating（更新阶段）。

最后通过在useEffect中返回一个函数，它便可以清理副作用。它的规则是：

首次渲染不会进行清理，会在下一次渲染，清除上一次的副作用。卸载阶段也会执行清除操作。

通过返回一个函数，我们就能实现ClassComponent中的Unmounting(卸载阶段)。

基于useEffect/useLayoutEffect，ahooks做了一些封装，能够让你更加清晰的知道你的代码执行时机。

LifeCycle-生命周期

useMount

只在组件初始化时执行的Hook。useEffect依赖假如为空，只会在组件初始化的时候执行。

//省略部分代码

constuseMount=(fn:()=void)={

//省略部分代码

//单纯就在useEffect基础上封装了一层

useEffect(()={

fn.();

},[]);

exportdefaultuseMount;

useUnmount

us