避免箭头函数并在 JSX Props 中绑定以获得最佳性能

React 的 lint 工具旨在通过突出显示潜在问题来增强代码实践。一种常见的错误消息是“JSX props 不应使用箭头函数”。这指出了在 JSX 属性中使用箭头函数或绑定的有害影响。

为什么箭头函数和绑定会阻碍性能

将箭头函数或绑定合并到 JSX 属性中具有性能影响：

• 垃圾收集： 每次创建箭头函数时，前一个被丢弃。如果使用内联函数渲染多个元素，则可能会导致动画断断续续。
• 重新渲染：内联箭头函数会干扰 PureComponent 和采用 shouldComponentUpdate 方法的组件使用的浅比较机制。由于每次都会重新创建箭头函数 prop，因此它会被检测为 prop 更改，从而触发不必要的重新渲染。

内联处理程序对重新渲染的影响

考虑这些示例：

示例 1：不带内联的 PureComponent Handler

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    console.log('render button');
    return Click;
  }
}

在此代码中，Button 组件仅在其 props 更改时重新渲染，正如 PureComponent 所预期的那样。

示例 2：带有内联处理程序的 PureComponent

const Button = (props) => {
  console.log('render button');
  return  props.onClick()}>Click;
};

由于内联箭头功能，即使组件状态保持不变，Button 现在每次都会重新渲染。这种不必要的重新渲染可能会严重影响性能。

最佳实践

为避免这些性能问题，建议遵循以下最佳实践：

• 在 JSX 之外定义事件处理程序： 提取箭头函数或将方法绑定到单独的变量中声明。
• 使用此绑定： 对于类组件，在构造函数中将事件处理程序绑定到 this。
• 利用高阶函数： 考虑使用map或bindActionCreators等高阶函数在JSX中更有效地处理事件。