為什麼在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 時應避免使用它們。