React useCallback 函数使用说明

React 中useCallback的作用：函数相等性检查。

useCallback 的函数原型：

useCallback(callbackFun, deps)

如果deps给出的依赖值不变 ，则useCallback在两次渲染阶段之间返回相同的函数实例。

考察如下代码：

1.  
   function func_factory() {
2.  
   return (a, b) => a b;
3.  
   }
4.  
    
5.  
   const sum1 = func_factory();
6.  
   const sum2 = func_factory();
7.  
    
8.  
   sum1(1, 2); // => 3
9.  
   sum2(1, 2); // => 3
10.  
     
11.  
    sum1 === sum2; // => false
12.  
    sum1 === sum1; // => true

sum1 和 sum2 是将两个数字相加的函数，它们是由 func_factory() 函数创建的。

函数 sum1 和 sum2 共享相同的代码源，但是它们是不同的对象，比较它们 sum1 === sum2 结果为 false。这就是JavaScript的工作方式，对象（包括函数对象）仅等于其自身。

在React中， 共享相同代码的不同函数实例往往在React组件内部创建。

当 React 组件主体创建一个函数（例如回调或事件处理程序）时，这个函数会在每次渲染时重新创建。

例如如下代码：

handleClick 在 MyComponent 的每次渲染中都是一个不同的函数对象。

1.  
   import React from 'react';
2.  
    
3.  
   function MyComponent() {
4.  
   // handleClick在每次渲染时重新创建
5.  
   const handleClick = () => {
6.  
   console.log('Clicked!');
7.  
   };
8.  
    
9.  
   // ...
10.  
    }

因为内联函数很“便宜”，所以React在每次渲染时重新创建函数不是问题，React的每个组件有几个内联函数是可以接受的。

然而，在某些情况下，你需要保留一个函数的一个实例，在React中以下情况需要保持内联函数的的变量值不变：

1）包装在 React.memo()（或 shouldComponentUpdate ）中的组件接受回调prop。
2）当函数用作其他hooks的依赖项时 useEffect(...，[callback])

useCallback 函数可以保证在deps不变的情况下，相同的代码片段返回同一个函数对象。

例如如下代码：

1.  
   import React, { useCallback } from 'react';
2.  
    
3.  
   function MyComponent() {
4.  
   // handleClick是同一个函数对象
5.  
   const handleClick = useCallback(() => {
6.  
   console.log('Clicked!');
7.  
   }, []);
8.  
    
9.  
   // ...
10.  
    }

handleClick 变量将在 MyComponent 不同的渲染周期之间始终保持返回相同的回调函数对象实例。

一个用于理解useCallback的示例：

如下代码，需要渲染一个大的列表，

1.  
   import React from 'react';
2.  
    
3.  
   function MyBigList({ items, handleClick }) {
4.  
   const map = (item, index) => (
5.  
   <div onClick={() => handleClick(index)}>{item}</div>;
6.  
   );
7.  
   return <div>{items.map(map)}</div>;
8.  
   }
9.  
    
10.  
    export const MyBigList = React.memo(MyBigList);

MyBigList 渲染了一个项目列表，这个列表可能很大，可能有几百个元素。要保留重新渲染的列表，可以将其封装到 React.memo 中。

MyBigList 的父组件需要提供元素列表和点击事件处理回调函数。

调用MyBigList的父组件及其示例代码如下：

1.  
   import React from 'react';
2.  
    
3.  
   import useSearch from './fetch-items';
4.  
    
5.  
   function MyParent({ term }) {
6.  
   const handleClick = useCallback((item) => {
7.  
   console.log('You clicked ', item);
8.  
   }, [term]);
9.  
    
10.  
    const items = useSearch(term);
11.  
     
12.  
    return (
13.  
    <MyBigList
14.  
    items={items}
15.  
    handleClick={handleClick}
16.  
    />
17.  
    );
18.  
    }

handleClick 回调函数由 useCallback() 记忆。只要 term 变量保持不变，useCallback() 就会返回相同的函数对象实例。

现在由于某些原因重新启用了 MyParent 组件，handleClick 仍保持不变，并且不会破坏 MyBigList的记忆，列表将避免重新渲染，提高性能。

一个错误使用useCallback的示例：

1.  
   import React, { useCallback } from 'react';
2.  
    
3.  
   function MyComponent() {
4.  
   const handleClick = useCallback(() => {
5.  
   // handle the click event
6.  
   }, []);
7.  
    
8.  
   return <MyChild onClick={handleClick} />;
9.  
   }
10.  
     
11.  
    function MyChild ({ onClick }) {
12.  
    return <button onClick={onClick}>I am a child</button>;
13.  
    }

以上示例代码用useCallback记住 handleClick 是否有意义？

答案时：没有意义，因为调用 useCallback() 其实需要很多工作，每次渲染 MyComponent 时，都会调用 useCallback() Hook。

从内部来讲，React确保返回相同的对象函数实例。即便如此，内联函数仍然在每次渲染时重新创建，useCallback 只是跳过了它，返回内部记录的原始实例而已。

即使用 useCallback() 返回相同的函数实例，也不会带来任何好处，因为优化要比没有优化花费更多。

不要忘记增加的代码复杂性，你必须确保 useCallback() 的 deps 与您在 memoized 回调中使用的 deps 保持同步。