為什麼應該避免在 JSX Props 中使用箭頭函數或綁定？

避免在JSX Props 中使用箭頭函數或綁定

為什麼這是一種不好的做法：

為什麼這是一種不好的做法：

• 不鼓勵在JSX props 中使用箭頭函數或綁定，因為它會對效能產生負面影響。原因如下：
• 垃圾收集效率低：在每個渲染上建立函數會在元件卸載時觸發不必要的垃圾收集。

渲染由於淺比較：

PureComponent 和在shouldComponentUpdate() 中使用shallowCompare 的元件會重新渲染，即使prop 值仍然存在不變，因為每次都會重新建立內聯函數prop 。

範例：

<Button onClick={() => console.log('clicked')} />

沒有內嵌箭頭函數：

按鈕不會重新渲染，除非它有其他道具

<Button onClick={this.handleClick} />

使用內聯箭頭函數：

每次組件渲染時，按鈕都會重新渲染，即使處理程序保持不變。

最佳實務：

class Button extends React.Component {
  handleClick = () => {
    // Handler logic
  };

  render() {
    return <button onClick={this.handleClick} />;
  }
}

要避免這些效能問題，請宣告JSX 以外的箭頭函數或綁定方法：

以上是為什麼應該避免在 JSX Props 中使用箭頭函數或綁定？的詳細內容。更多資訊請關注PHP中文網其他相關文章！