以处理事件为例

Question

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
   // This syntax ensures `this` is bound within handleClick
   return (
   <button onClick={(e) => this.handleClick(e)}>
     Click me
   </button>
   );
  }
}

此语法的问题在于每次 LoggingButton 呈现时都会创建不同的回调。在大多数情况下，这很好。但是，如果此回调作为道具传递给较低的组件，则这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用类字段语法，以避免此类性能问题。

我不明白什么是额外的重新渲染。可以给我例子

Answer 1

额外的重新渲染是在不需要时重新渲染。
当组件的 props 或 state 改变时，它会重新渲染。在示例中，子按钮组件将回调作为道具获取。
由于每次父组件渲染时都会重新创建回调，因此子/按钮组件将不必要地重新渲染（回调始终相同，但是示例中定义的方式导致它被重新创建，就好像它与之前的不同'化身'，在之前的渲染中）。