前言

本文是 ahooks 源码(v3.7.4)系列的第六篇——Dev 篇,该篇主要是协助开发调优的 Hook,只有两个

往期文章:

本文主要解读 useTrackedEffectuseWhyDidYouUpdate 的源码实现

useTrackedEffect

追踪是哪个依赖变化触发了 useEffect 的执行。

官方文档

基本用法

查看每次 effect 执行时发生变化的依赖项

官方在线 Demo

import React, { useState } from 'react';
import { useTrackedEffect } from 'ahooks';

export default () => {
  const [count, setCount] = useState(0);
  const [count2, setCount2] = useState(0);

  useTrackedEffect(
    (changes) => {
      console.log('Index of changed dependencies: ', changes);
    },
    [count, count2],
  );

  return (
    <div>
      <p>Please open the browser console to view the output!</p>
      <div>
        <p>Count: {count}</p>
        <button onClick={() => setCount((c) => c + 1)}>count + 1</button>
      </div>
      <div style={{ marginTop: 16 }}>
        <p>Count2: {count2}</p>
        <button onClick={() => setCount2((c) => c + 1)}>count + 1</button>
      </div>
    </div>
  );
};

核心实现

实现原理:通过 uesRef 记录上一次依赖的值,在当前执行的时候,判断当前依赖值和上次依赖值之间有无变化

  • changes:变化的依赖 index 数组
  • previousDeps:上一个依赖
  • currentDeps:当前依赖
useTrackedEffect(
  effect: (changes: [], previousDeps: [], currentDeps: []) => (void | (() => void | undefined)),
  deps?: deps,
)

源码实现

const useTrackedEffect = (effect: Effect, deps?: DependencyList) => {
  const previousDepsRef = useRef<DependencyList>(); // 记录上次依赖

  useEffect(() => {
    // 判断依赖前后的 changes
    const changes = diffTwoDeps(previousDepsRef.current, deps);
    const previousDeps = previousDepsRef.current; // 赋值上次依赖
    previousDepsRef.current = deps;
    return effect(changes, previousDeps, deps);
  }, deps);
};

diffTwoDeps 方法实现:

  1. 对前后两个 deps 依赖项列表使用 Object.is 进行严格相等性检查
  2. 如果定义了 deps1,则遍历 deps1 并将每个元素与来自 deps2 的对应索引元素进行比较(因为这个函数只在这个钩子中使用,所以假设两个 deps 列表的长度总是相同的)

    • 相等返回 -1
    • 不相等返回索引值
    • 过滤小于 0 的值(即校验结果相等的).filter((ele) => ele >= 0),最终只返回变化的数组索引值
const diffTwoDeps = (deps1?: DependencyList, deps2?: DependencyList) => {
  // 对前后两个 deps 依赖项列表使用 Object.is 进行严格相等性检查
  return deps1
    ? deps1
        .map((_ele, idx) => (!Object.is(deps1[idx], deps2?.[idx]) ? idx : -1))
        .filter((ele) => ele >= 0) // 过滤相等值
    : deps2
    ? deps2.map((_ele, idx) => idx)
    : [];
};

完整源码

useWhyDidYouUpdate

帮助开发者排查是那个属性改变导致了组件的 rerender。

官方文档

基本用法

官方在线 Demo

打开控制台,可以看到改变的属性。

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

const Demo: React.FC<{ count: number }> = (props) => {
  const [randomNum, setRandomNum] = useState(Math.random());

  useWhyDidYouUpdate('useWhyDidYouUpdateComponent', { ...props, randomNum });

  return (
    <div>
      <div>
        <span>number: {props.count}</span>
      </div>
      <div>
        randomNum: {randomNum}
        <button onClick={() => setRandomNum(Math.random)} style={{ marginLeft: 8 }}>
          🎲
        </button>
      </div>
    </div>
  );
};

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

  return (
    <div>
      <Demo count={count} />
      <div>
        <button onClick={() => setCount((prevCount) => prevCount - 1)}>count -</button>
        <button onClick={() => setCount((prevCount) => prevCount + 1)} style={{ marginLeft: 8 }}>
          count +
        </button>
      </div>
      <p style={{ marginTop: 8 }}>Please open the browser console to view the output!</p>
    </div>
  );
};

使用场景

  • 检查哪些 props 发生改变
  • 协助找出无效渲染:useWhyDidYouUpdate 会告诉我们监听数据中所有变化的数据,不管它是不是无效的更新,但还需要我们自己来区分识别哪些是无效更新的属性,从而进行优化。

实现思路

  1. 使用 useRef 声明 prevProps 变量(确保拿到最新值),用来保存上一次的 props
  2. 每次 useEffect 更新都置空 changedProps 对象,并将新旧 props 对象的属性提取出来,生成属性数组 allKeys
  3. 遍历 allKeys 数组,去对比新旧属性值。如果不同,则记录到 changedProps 对象中
  4. 如果 changedProps 有长度,则输出改变的内容,并更新 prevProps

核心实现

实现原理:通过 useEffect 拿到上一次 props 值 和当前 props 值 进行遍历比较,如果值发送改变则输出

// componentName:观测组件的名称
// props:需要观测的数据(当前组件 state 或者传入的 props 等可能导致 rerender 的数据)
export default function useWhyDidYouUpdate(componentName: string, props: IProps) {
  const prevProps = useRef<IProps>({});

  useEffect(() => {
    if (prevProps.current) {
      // 获取所有的需要观测的数据
      const allKeys = Object.keys({ ...prevProps.current, ...props });
      const changedProps: IProps = {}; // 发生改变的属性值

      allKeys.forEach((key) => {
        // 通过 Object.is 判断是否进行更新
        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.current = props;
  });
}

完整源码


JackySummer
529 声望238 粉丝