为什么应该避免在 JSX Props 中使用箭头函数或绑定？

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

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

性能问题

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

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

不正确的行为

考虑以下示例：

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

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

最佳实践

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

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

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

• 在外部创建箭头函数render 方法的：

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

附加说明：

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

以上是为什么应该避免在 JSX Props 中使用箭头函数或绑定？的详细内容。更多信息请关注PHP中文网其他相关文章！