React项目中的优化性能之一，解读usePersistFn源码~ - 哈喽比特

1024次阅读 | 发布于2年以前

前言

大家好， 用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心

最近在项目中接触到了一个hook库——AHooks，它提供了非常多的React自定义hook，提供给开发者使用，今天就带大家来了解一下usePersistFn这个Hook，并探究一下它的原理吧！！！

useCallBack + memo

说usePersistFn之前，先带大家看看一个功能跟它很类似的一个React原生Hook——useCallBack

基本使用

比方我们现在有一个页面：

// App.tsx

import React, { useState } from 'react';

const App: React.FC = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const [count3, setCount3] = useState(0);
  const handleClick1 = () => {
    setCount1(count1 + 1);
  };
  const handleClick2 = () => {
    setCount2(count2 + 1);
  };
  const handleClick3 = () => {
    setCount3(count3 + 1);
  };
  return (
    <>
      <Button handleClick={handleClick1}>按钮1</Button>
      <Button handleClick={handleClick2}>按钮2</Button>
      <Button handleClick={handleClick3}>按钮3</Button>
    </>
  );
};

// Button.tsx

import React from 'react';

interface IButton {
  handleClick: () => void;
}

const Button: React.FC<IButton> = (props) => {
  const { handleClick, children } = props;

  return (
    <div>
      <button onClick={handleClick}>{children}</button>
      {Math.random() * 10000}
    </div>
  );
};

export default Button;

我们依次来点击这三个按钮，其实效果都一样：

1、点击按钮1，更新了count1，导致整个App重新渲染，也就导致handleClick1、2、3全都重新赋值，也就是地址改变，从而导致三个按钮全都重新渲染导致三个随机数重新计算
2、点击按钮2，更新了count2，导致整个App重新渲染，也就导致handleClick1、2、3全都重新赋值，也就是地址改变，从而导致三个按钮全都重新渲染导致三个随机数重新计算
3、点击按钮3，更新了count3，导致整个App重新渲染，也就导致handleClick1、2、3全都重新赋值，也就是地址改变，从而导致三个按钮全都重新渲染导致三个随机数重新计算

如果现在我们使用useCallBack套住handleClick2，并且第二个参数传入依赖值count2

// App.tsx

import React, { useCallbackm, useState } from 'react';

  const handleClick1 = () => {
    setCount1(count1 + 1);
  };
  const handleClick2 = useCallback(() => {
    setCount2(count2 + 1);
  }, [count2]);
  const handleClick3 = () => {
    setCount3(count3 + 1);
  };

并且使用memo将Button组件包住，memo的作用是比较props中的值，如果值没有变化则不重渲染子组件，也就是说，我们只要保证handleClick地址不变，就可以保证Button不重渲染，而useCallBack就可以保证你的函数地址一直不变（除非依赖值更改了）

// Button.tsx
import React, { memo } from 'react';

export default memo(Button);

现在我们再次来点击三个按钮：

1、点击按钮1，更新了count1，导致整个App重新渲染，导致handleClick1、3被重新赋值，而由于count2没变，所以handleClick2地址不变，所以只有按钮1、3重新渲染
2、点击按钮2，更新了count2，导致整个App重新渲染，也就导致handleClick1、2、3全都重新赋值，也就是地址改变，从而导致三个按钮全都重新渲染导致三个随机数重新计算
3、点击按钮1，更新了count3，导致整个App重新渲染，导致handleClick1、3被重新赋值，而由于count2没变，所以handleClick2地址不变，所以只有按钮1、3重新渲染

注意点：每次handleClick2的函数是一直在变的，但是地址不变

依赖值为空

那么肯定有同学要问了，那如果依赖值为空，那么handleClick2就会一直不变，这样不是能把性能最大化吗？

其实是不行的，大家可以试试把依赖值去掉

  const handleClick2 = useCallBack(() => {
    setCount2(count2 + 1);
  }, []);

然后去点击按钮2，你会发现只有第一次点击时会更新，后面点击都不会更新了。。这是因为useCallBack内部是的闭包陷阱问题，如果不传依赖值，那么useCallBack接收的函数内部的count2一直是初始值0，所以每次都是setCount2(0 + 1)，这才导致只有第一次刷新，后面点击都不刷新。。

依赖值频繁更改

如果依赖值频繁更改，那么会导致useCallBack去频繁计算比对，这样会造成一些性能消耗，所以这时候可以使用useRef来优化

const textRef = useRef('');
const [text, setText] = useState('');

const handleSubmit = useCallback(() => {
  console.log(textRef.current);
  // ...
}, [textRef]);

return (
  <form>
    <input value={text} onChange={(e) => {
      const { value } = e.target;
      setText(value)
      textRef.current = value;
    }} />
    <OtherForm onSubmit={handleSubmit} />
  </form>
);

这样做有三个好处：

1、由于每次依赖值是浅层对比，所以让textRef当依赖值能保证变化频率最低
2、由于第1点，进而保证了handleSumbit的指针能保持变化频率最低
3、虽然指针变化频率低，但是函数内的内容却是实时更新的，因为textRef.current的内容是实时更新的，这就解决了刚刚空依赖值的闭包问题

总结

memo：它的作用简单点来讲就是，每次父组件重新渲染时，子组件会判断父传下来的props中的数据有无改变，无改变则子组件不刷新，反之则跟着父组件重渲染
useCallBack：它的作用是保证函数只会在依赖值改变时才会让函数指向新地址，这样的话，配合memo就可以减少很多不必要的子组件渲染，但是不能频繁使用，因为useCallBack需要每次都比对，滥用会导致消耗性能。

建议

建议是子组件比较复杂的情况下才用，这样能减少复杂子组件的重渲染

usePersistFn

其实最好的情况就是：

1、函数的指针一直不变，这样才能保证子组件重渲染频率降到最低
2、函数内的数据不能受限于闭包，必须保证是实时数据

其实我们刚刚已经使用了useCallBack + useRef实现了这样的效果，但是有一个问题，如果要保持函数指针一直不变，那么此时依赖值就没有意义了，但是useCallBack是一定要传第二个参数的，虽然也可以是空数组。

而usePersistFn只需要传入初始函数就够了，不需要第二个参数。

原理

其实usePersistFn原理总结为两条：

1、保证函数指针一直不变
2、保证函数内的数据是实时的

它的内部只利用了useRef这个hook

前置知识：通过useRef设值的变量，不会因为组件刷新而重新赋值，链接：https://react.html.cn/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback

function usePersistFn(fn) {
  // 每次传进来的fn都是新的内容
  const fnRef = useRef(fn);
  // 由于useRef每次刷新不重设值
  // 所以这里多了一步设置current
  fnRef.current = fn;


  const persistFn = useRef();
  // 只有初次会触发true
  if (!persistFn.current) {
    // 只赋值一次，保证指针一直不变
    persistFn.current = function (...args) {
      // fnRef.curret是实时改变的
      // 保证内容是最新的
      return fnRef.current.apply(this, args);
    };
  }

  return persistFn.current;
}