[React Hooks] useCallback 学习

2019-10-30 本文已影响0人小黄人get徐先生

官方文档：https://reactjs.org/docs/hooks-reference.html#usecallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useCallback 接收一个内联回调函数和一个依赖数组，返回一个记忆版本的回调函数，只有当依赖发生变化的时候，回调函数才会改变。这在将回调传递给优化的子组件时非常有用，这些组件依赖引用相等性来防止不必要的渲染（引用没有发生变化）

所以我们这里将带着一个问题阅读下面的内容：当依赖发生改变的时候，变量 memoizedCallback 的引用会发生变化吗？

下面给个代码例子：

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

const set = new Set();

function App() {

    const [num, setNum] = useState([1,2,3]);
    const [num1, setNum1] = useState([4,5,6]);

    const mCallback = useCallback(() => { console.log('callback function');return [...num, ...num1] }, []);

    return (
        <>
            <ChildrenApp num={num} num1={num1} callback={mCallback}  />
            <button onClick={() => setNum([7,8,9])} >change num</button>
            <button onClick={() => setNum1([10,11,12])} >change num1</button>
        </>
    )
}

function ChildrenApp({num, num1, callback}) {

    set.add(callback);

    console.log(set);

    return (
        <div>
            {num} - {num1} - {callback()}
        </div>
    )
}

export default App;

初始化加载后
如图，初始化加载后num和num1显示分别为 123 和 456，callback 函数显示结果为 123456。set 集合里面只有一个 callback 函数，callback 函数被调用，打印信息 callback function
点击 change num，num 变为 789，页面以及console 显示如下图：
点击 change num1 后，如下图：

从上面的过程我们可以发现，set 集合里面一直只有一个函数，这说明了 callback 函数的引用没有发生变化，使用的是记忆化的版本函数。这里之所以 callback 显示的值一直是 123456 没有变化，原因在于 mCallback 函数的依赖列表为空，并没有监听 num 和 num1 的变化，所以其闭包里面的 num 和 num1 值一直分别是 123 和 456。

下面我们做点变化，修改下 mCallback 函数内容如下：

const mCallback = () => [...num, ...num1];

初始化加载
点击 change num
点击 change num1

整个流程下来，我们可以看到 set 里面包含了三个 function，说明了每次重新渲染的时候都会重新生成 mCallback 函数并传递给子组件。

下面我们再修改修改 mCallback 函数，给它添加上依赖列表，代码如下：

const mCallback = useCallback(() => { console.log('callback function');return num }, [num]);

初始化过程
点击 change num

这次我们在依赖列表里面监听了 num ，所以当 num 发生变化的时候，mCallback 函数会重新生成，所以 set 里面便有了两个函数。
点击 change num1

当我们点击 change num1 的时候，set 里面依然是两个函数。因为我们在依赖列表里面没有监听 num1，所以即使 num1 发生了变化，mCallback函数也不会重新生成，而是继续使用记忆化的历史版本。

总结：

普通函数在重新渲染时会重新生成，所以引用会变。
使用 useCallback 包装的函数，依赖列表为空时，重新渲染时该函数会使用记忆化的版本函数，所以引用不会变化
使用 useCallback 包装的函数，依赖列表存在依赖，重新渲染时对应的依赖发生变化，该函数会重新生成，所以引用发生变化，

这里就完了吗？不，还有一个问题。为什么依赖发生变化的时候需要重新生成函数那？这里面和作用域的知识有点相关。

首先我们看看普通函数
ChildrenApp 的 callback 函数其实是指向 App 的 mCallback 函数的，即 callback -> mCallback，所以调用 callback 函数也就是调用 mCallback 函数，里面用到的 num 和 num1 是 App 组件作用域里面的 num 和 num1。
再来看看依赖为空的情况
和上面一样，ChildrenApp 的 callback 函数其实是指向 App 的 mCallback 函数的，即 callback -> mCallback，但是我们这里的 mCallback 函数是一个记忆化版本函数，在初始化的时候，App 作用域下的 num 和 num1 传给 mCallback 函数闭包环境里面的 num 和 num1。因为我们的依赖列表为空，不监听变化，所以闭包里面的内容不会发生变化。所以 mCallback 函数也就没有重新生成。
最后看看有依赖的情况
和依赖为空的差别在于，例如当依赖 num 发生变化的时候，mCallback 闭包环境里对应的 num 会被重新赋值，这个流程会触发生成一个新的函数。

[React Hooks] useCallback 学习

总结：

猜你喜欢

热点阅读