為什麼要避免在 React 渲染方法中使用內聯箭頭函數？

避免在渲染方法中使用內聯箭頭函數

建議避免在渲染方法中使用內嵌箭頭函數，例如this._handleChange .bind(this) React 元件的render 方法。

原因：

在重新渲染期間，React 將建立新方法而不是重複使用舊方法。這可能會導致不必要的函數創建和記憶體分配，從而對效能產生不利影響。

替代方案：

有多種方法可以繞過渲染方法內的綁定箭頭函數：

1。建構子綁定：

• 在建構子中綁定方法：this._handleChange = this._handleChange.bind(this);

• 示例：

  class MyClass extends React.Component {
     constructor(props) {
        super(props);
        this._handleChange = this._handleChange.bind(this);
     }
  
     _handleChange() {
        // ...
     }
  
     render() {
        return <input onChange={this._handleChange} />;
     }
  }

2.屬性初始值設定項語法：

• 使用屬性初始值設定項語法定義方法： _handleChange = () => { ... };

• 範例：

  class MyClass extends React.Component {
     _handleChange = () => {
        // ...
     };
  
     render() {
        return <input onChange={this._handleChange} />;
     }
  }

3.使用回調函數處理事件：

• 建立一個單獨的回呼函數來接收必要的參數：

• 範例：

  class MyClass extends React.Component {
     handleDeleteTodo = (todo) => {
        // ...
     };
  
     render() {
        return todos.map((todo) => (
           <div key={todo}>
              <input onChange={this.handleDeleteTodo.bind(this, todo)}>
              {todo}
           </div>
        ));
     }
  }

4。元件作用域箭頭函數：

• 在渲染方法外部但在元件類別作用域內宣告箭頭函數：

• 範例：

  class MyClass extends React.Component {
      _handleDeleteTodo = (todo) => {
         // ...
      };
  
      render() {
         return todos.map((todo) => (
            <div key={todo} onClick={this._handleDeleteTodo.bind(this, todo)}>
               {todo}
            </div>
         ));
      }
  }

5。外部事件處理程序：

• 將事件處理邏輯移至外部元件或輔助函數，以避免在渲染方法中綁定：

• 範例：

  const handleDeleteTodo = (todo) => {
     // ...
  };
  
  class MyClass extends React.Component {
     render() {
        return todos.map((todo) => (
           <MyComponent todo={todo} onDelete={handleDeleteTodo} />
        ));
     }
  }
  
  class MyComponent extends React.Component {
     render() {
        return <div onClick={this.props.onDelete.bind(this, this.props.todo)}>{this.props.todo}</div>;
     }
  }

這些替代方案提供了處理React元件內事件的有效方法不會犧牲效能或引入不必要的函數綁定。

以上是為什麼要避免在 React 渲染方法中使用內聯箭頭函數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！