React 性能优化之 useCallback

Published: at 02:19 PMSuggest Changes

在同事的项目中，我经常看到他们会用到 useCallback 我抽了点时间去了解它，但是越了解这个函数给我带来的困扰越大。

参见官方文档：useCallback

然而，，，可能理解能力太差了，我不是很理解。

官方说明

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

返回一个 memoized 回调函数。

把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染（例如 shouldComponentUpdate）的子组件时，它将非常有用。

网上查资料

思否上的文章，不错：你不知道的 useCallback

尽管作者已经解释的很详细了，但是我的困扰确实是越来越多了，后来我看到了另外一篇国外的文章，恍然大悟

Your Guide to React.useCallback()

这是一篇英文文章。

它再最开始，举出了这样的例子

function factory() {
  return (a, b) => a + b;
}

const sum1 = factory();
const sum2 = factory();

sum1(1, 2); // => 3
sum2(1, 2); // => 3

sum1 === sum2; // => false
sum1 === sum1; // => true

这样理解起来就方便多了，组件在重绘的时候，会重新执行方法，也就是会重新构造一个函数。

import React, { useCallback } from 'react';

function MyComponent() {
  const handleClick = useCallback(() => {
    // handle the click event
  }, []);

  return <MyChild onClick={handleClick} />;
}

看一下上面的这段代码，当组件重绘的时候，不使用 useCallback 的时候就会重新生成一个 handleClick 方法，虽然方法是一模一样的，但是它确实是重新生成了。

如果函数方法非常复杂耗时很长的话就会产生性能问题，所以就有了 useCallback，我在群里也有问过，德巨和另外一个扫地憎级（不好意思我忘记叫啥了）的大佬回答了我这一问题。

德巨（德国巨佬）可爱的 kiochan 说的是：当 xxxx 改变的时候 我这个函数才重新创建

非常通俗易解

后记

可能我的理解还有很多不到位的地方，上面我有提到有一篇文章给我带来了困扰是这段话

上面的例子中，如果不用 useCallback, 任何一个输入框的变化都会导致另一个输入框重新渲染。

这段话没有问题，但是出现在了不适当的位置。。

他应该说的是：“任何一个输入框的变化，都会导致另一个输入框中的 onChange 事件重新创建”合适一些。

因为直接说重新渲染，我不知道这和 useCallback 有什么关系？

Previous Post
React 性能优化之 React.memo
Next Post
React 阻止事件冒泡