为什么在 JSX Props 中使用箭头函数或 Bind 是禁忌

使用 React 时，避免使用箭头函数或 Bind 非常重要在 JSX 属性中绑定。这种做法可能会导致性能问题和不正确的行为。

性能问题

在 JSX props 中使用箭头函数或绑定会强制在每次渲染时重新创建这些函数。这意味着：

• 旧函数被丢弃，触发垃圾回收。
• 连续渲染许多元素会导致性能抖动。
• 依赖 PureComponents 的组件或 shouldComponentUpdate 由于更改箭头函数 prop 仍会触发重新渲染。

不正确的行为

考虑以下示例：

onClick={() => this.handleDelete(tile)}

此代码将在每次渲染上创建一个新函数，导致 React 将组件标记为脏并触发重新渲染。即使tile prop没有改变，组件也会重新渲染，因为箭头功能不同。

最佳实践

要避免这些陷阱，请使用以下最佳实践：

• 在构造函数中绑定事件处理程序：

constructor(props) {
  super(props);
  this.handleDelete = this.handleDelete.bind(this);
}

• 在渲染方法之外创建一个箭头函数：

const handleDelete = tile => {
  // Handle delete logic
};

附加说明：

需要注意的是，箭头函数在组件的其他部分（例如在 render 方法中）使用时完全没问题。但是，在将事件处理程序分配给 JSX props 时应避免使用它们。