ahooks源码分析之usePrevious

阳光穿透心脏的1/2处 2023-01-17 08:00 90阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![a6fcbcec5e38f0a433a6f555fc76ab0d.png][]

# 来源：倒影 #

https://juejin.cn/post/6952118323559530504

`usePrevious`用于保存上一次渲染时的状态。

`React`官方文档提供了一个实现:

function usePrevious(value) {
      const ref = useRef();
      useEffect(() => {
        ref.current = value;
      });
      return ref.current;
    }
    复制代码

`usePrevious`记录的值初始为空，每轮**渲染后**记录状态值，这样每次渲染返回的便是上一轮渲染时的值。

`react-use`同样使用了此实现。

`ahooks`则为用户提供了`compare`，可以让用户决定是否更新`usePrevious`记录的值。

import { useRef } from 'react';
    
    export type compareFunction<T> = (prev: T | undefined, next: T) => boolean;
    
    function usePrevious<T>(state: T, compare?: compareFunction<T>): T | undefined {
      const prevRef = useRef<T>();
      const curRef = useRef<T>();
    
      const needUpdate = typeof compare === 'function' ? compare(curRef.current, state) : true;
      if (needUpdate) {
        prevRef.current = curRef.current;
        curRef.current = state;
      }
    
      return prevRef.current;
    }
    
    export default usePrevious;
    复制代码

`ahooks` 使用了两个`ref`，一个记录当前值，一个记录之前的值。不过为什么要这样实现呢？这样实现与`react-use`的实现方式有什么不同？????

在一番试验无果后，随意搜索了下却找到了这个issue

什么？`ahooks`的实现不符合使用规范????

在`issue`作者给出的链接中说明了在`render`时读取或修改`ref`的值时会进行警告，并且Dan在回复中说明了这样做的原因。

![8d9cfb368292905b75dd04f823c20062.png][] image.png

大意是在`render`时读取`ref`的值和读取一个随机的全局变量一样。读取的值是什么取决于何时调用render。如果`React`调用在稍微不同的时间渲染，可能会得到不同的结果。

在未来`React`默认开启Concurrent模式后，`ahooks`的实现便会出现问题。

`issue`作者除了给出解释之外，还提供了一个demo。demo中使用的`usePrevious`在`StrictMode`下有了不同的行为。

不过demo中渲染用的也是`legacy`模式，那为什么在`StrictMode`下行为会不同？????

打断点调试了一番，发现进入页面时`usePrevious`居然被调用了两次，导致`curRef`和`preRef`记录的状态出现了问题。

在React issue中搜索`StrictMode`、`twice`等关键字找到了原因，还是我们的Dan神回复的：

![85ea09d1479492d0651cf84311e74533.png][] image.png

issue地址

使用了`StrictMode`且用了`Hooks`的组件会在开发模式时渲染两次。`StrictMode`的一个主要目的是方便将现有项目迁移到未来使用`concurrent`模式的React版本中，会这么设计不奇怪。

至此，作战告捷????

简单改了下`ahooks`的`usePrevious`实现。

function usePrevious<T>(state: T, compare?: (prev: T | undefined, next: T) => boolean): T | undefined {
      const ref = useRef<T>();
    
      useEffect(() => {
        const needUpdate = typeof compare === 'function' ? compare(ref.current, state) : true;
        if (needUpdate) {
          ref.current = state;
        }
      });
    
      return ref.current;
    }
    复制代码

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[a6fcbcec5e38f0a433a6f555fc76ab0d.png]: /images/20221021/b62a2821d8ef4d76806a5be804b1059e.png
[8d9cfb368292905b75dd04f823c20062.png]: /images/20221021/1c141bf274304af5b3363264881cec5c.png
[85ea09d1479492d0651cf84311e74533.png]: /images/20221021/640b56236d1847cfa4077e8392816310.png