React事件处理程序性能问题

Question

关于在事件处理程序中使用箭头函数和绑定到“this”的类方法的问题，React 的官方文档中指出：

“使用这种语法（箭头函数）的问题在于每次 LoggingButton（一个组件示例） 渲染时都会创建一个不同的回调。在大多数情况下，这没问题。但是，如果将该回调作为 prop 传递给较低级别的组件，则这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中进行绑定或使用类字段语法，以避免这种性能问题。”

由于新的方法建议使用函数组件而不是类，那么如何解决上述性能问题呢？

- Reyraa

---

如何使用函数式组件跳过官方 React 文档的第一页。 - Dmitrii G.

Answer 1

使用useCallback来记忆函数。useCallback的第二个参数允许您指定哪些变量应该导致函数被重新创建。如果其中一个发生更改，将创建一个新的回调，否则将重用相同的函数引用。如果您希望永远不创建新函数，则可以将空数组作为第二个参数。

import React, { useCallback } from 'react';

const ExampleComponent = (props) => {
  const onClick = useCallback(() => {
    console.log('got clicked', props.name);
  }, [props.name]);

  return (
    <SomeOtherComponent onClick={onClick} />
  )
}

- Nicholas Tower

Answer 2

尝试这个（在构造函数中绑定）

constructor(props) {
    super(props);
    
    // option #1: binding in the constructor
    this.handleClick = this.handleClick.bind(this);
  }

或者这样（类字段语法）

  // class fields syntax
  handleClick = () => {
    console.log('this is:', this);
  }

这两个问题都在上面的段落中由React进行了记录。

- Vikas