為什麼箭頭函數和 Bind 會導致 JSX Props 中的效能問題？

避免使用箭頭函數並在JSX Props 中綁定以獲得最佳性能

React 的lint 工具旨在透過突出顯示潛在問題來增強程式碼實踐。常見的錯誤訊息是「JSX props 不應使用箭頭函數」。這指出了在 JSX 屬性中使用箭頭函數或綁定的不利影響。

為什麼箭頭函數和綁定會阻礙效能

將箭頭函數或綁定合併到JSX 屬性中具有效能影響：

• 垃圾收集：每次建立箭頭函數時，前一個都會被丟棄。如果使用內聯函數渲染多個元素，可能會導致動畫斷斷續續。
• 重新渲染：內嵌箭頭函數會幹擾 PureComponent 和使用 shouldComponentUpdate 方法的元件所使用的淺比較機制。由於每次都會重新建立箭頭函數 prop，因此它會被偵測為 prop 更改，觸發不必要的重新渲染。

內聯處理程序對重新渲染的影響

考慮這些範例：

範例1：沒有內聯處理範例程式的PureComponent

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

在此程式碼中，Button 元件僅在其props 變更時重新渲染，正如PureComponent 所預期的那樣.

範例2：內嵌處理程序的PureComponent

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

由於內聯箭頭功能，Button 現在每次都會重新渲染，即使元件狀態保持不變。這種不必要的重新渲染會嚴重影響效能。

最佳實踐

為避免這些效能問題，建議遵循以下最佳實務：

• 在JSX 之外定義事件處理程序： 將箭頭函數或綁定方法提取到單獨的變數宣告中。
• 使用此綁定： 對於類別元件，綁定事件在建構函式中對此進行處理。
• 利用高階函數：考慮使用高階函數（如 map 或 bindActionCreators）在 JSX 中更有效地處理事件。

以上是為什麼箭頭函數和 Bind 會導致 JSX Props 中的效能問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！