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

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

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

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

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

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

考慮這些範例：

範例1：不含內聯的PureComponent Handler

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

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

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

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

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

最佳實踐

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

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