React 性能调试好帮手：useWhyDidYouUpdate

最新推荐文章于 2024-08-13 08:24:15 发布

前端西瓜哥

最新推荐文章于 2024-08-13 08:24:15 发布

阅读量554

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/fe_watermelon/article/details/126005037

版权

大家好，我是前端西瓜哥。

最近在尝试优化 React 组件，使用了 React.memo() 去缓存组件的渲染结果。

但有一个问题，就是要使 React.memo() 的缓存生效，需要保持 props 对象的浅比较结果为 true。

所以我们需要通过 useCallback 或 useMemo 处理一些对象类型的 prop，让它们保持指向原来的内存对象。

在 props 少的时候还好，但一旦多了之后，我们就比较难通过肉眼确认是哪个 prop 导致缓存失效。

怎样才能够方便地知道 props 的哪个属性发生了改变呢？

你可以试试 useWhyDidYouUpate。

useWhyDidYouUpate

useWhyDidYouUpate 是一个第三方 React Hooks，来自优秀的 ahooks 库。

名字很直白：Why did you update，意思就是 “你（组件）为什么更新了？”。

顾名思义，useWhyDidYouUpate 的作用是 帮助开发者排查是哪个属性改变导致了函数组件重渲染。

用法很简单，传入一个标识符字符串（通常为组件名）、以及要进行对比的对象（通常为 props）。

useWhyDidYouUpdate('Counter', props);

useWhyDidYouUpdate 会保存好上一次传入的 props，然后和新传入的 props 进行比较，找出不同的属性，将它们打印到控制台。

我们来看个示例：

import { useWhyDidYouUpdate } from 'ahooks';
import { useState } from 'react';

function Counter(props) {
  useWhyDidYouUpdate('Counter', props);

  return (
    <div>
      <div>{props.title}</div>
      <div>{props.count}</div>
    </div>
  );
}

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <button onClick={() => setCount(count + 1)}>+ 1</button>
      <Counter title={'计数显示'} count={count} />
    </div>
  );
}

点击 “+ 1” 按钮，然后就会在控制台看到下面输出：

这样我们就可以知道，是因为 count 从原来的 0，变成了现在的 1，导致了 Counter 组件的更新。

在线 demo：

https://codesandbox.io/s/u279ov?file=/src/App.js

实现

useWhyDidYouUpdate 的实现不是很复杂，我们直接贴源码（去掉 TS 类型标注）分析一下。

function useWhyDidYouUpdate(componentName, props) {
  const prevProps = useRef({});

  useEffect(() => {
    if (prevProps.current) {
      // 提取新旧 props 的属性，生成数组
      const allKeys = Object.keys({ ...prevProps.current, ...props });
      const changedProps = {};

      allKeys.forEach((key) => {
        // 对比 新旧 prop[key]，如果不同，记录到对象中
        if (!Object.is(prevProps.current[key], props[key])) {
          changedProps[key] = {
            from: prevProps.current[key],
            to: props[key],
          };
        }
      });

      if (Object.keys(changedProps).length) {
        // 输出到控制台
        console.log('[why-did-you-update]', componentName, changedProps);
      }
    }

    // 更新 prevProps
    prevProps.current = props;
  });
}

首先用 useRef 来声明一个 prevProps 变量，用来保存上一次的 props。