javascript - React 中 useCallback/useMemo 的作用是什么？

Question

如 docs 中所述, 使用回调返回一个内存回调。

传递一个内联回调和一个输入数组。 useCallback 将返回回调的内存版本，该回调仅在其中一个输入发生变化时发生变化。这在将回调传递给依赖于引用相等性的优化子组件以防止不必要的渲染(例如 shouldComponentUpdate)时非常有用。

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

但是它是如何工作的以及在 React 中哪里最好使用它？

附言我认为可视化 codepen example会帮助大家更好的理解它。 Explained in docs .

Answer 1

当您想要防止不必要的重新渲染以获得更好的性能时，最好使用此方法。

比较这两种将回调传递给取自 React Docs 的子组件的方法:

1。渲染中的箭头函数

class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <Button onClick={() => this.handleClick()}>Click Me</Button>;
  }
}

2。在构造函数中绑定(bind)(ES2015)

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <Button onClick={this.handleClick}>Click Me</Button>;
  }
}

假设<Button>实现为 PureComponent , 第一种方式会导致 <Button>每次重新渲染<Foo>重新渲染，因为在每个 render() 中创建了一个新函数称呼。在第二种方式中，handleClick方法仅在 <Foo> 中创建一次的构造函数并跨渲染重用。

如果我们使用钩子(Hook)将这两种方法转化为功能组件，那么这些是等价物(某种程度上):

1。渲染中的箭头函数 -> 取消内存回调

function Foo() {
  const handleClick = () => {
    console.log('Click happened');
  }
  return <Button onClick={handleClick}>Click Me</Button>;
}

2。在构造函数中绑定(bind) (ES2015) -> 内存回调

function Foo() {
  const memoizedHandleClick = useCallback(
    () => console.log('Click happened'), [],
  ); // Tells React to memoize regardless of arguments.
  return <Button onClick={memoizedHandleClick}>Click Me</Button>;
}

第一种方式在功能组件的每次调用时创建回调，但在第二种方式中，React 会为您记住回调函数，并且不会多次创建回调。

因此在第一种情况下如果Button使用 React.memo 实现它总是会重新渲染(除非你有一些自定义比较功能)因为 onClick prop 每次都不一样，在第二种情况下，它不会。

在大多数情况下，采用第一种方式就可以了。正如 React 文档所述:

Is it OK to use arrow functions in render methods? Generally speaking,yes, it is OK, and it is often the easiest way to pass parameters tocallback functions.

If you do have performance issues, by all means, optimize!