為什麼要避免在 React 的 Render 方法中使用 Bind 和 Inline Arrow 函數？-js教程-PHP中文網

為什麼要避免在 React 的 Render 方法中使用 Bind 和 Inline Arrow 函數？

Patricia Arquette

發布： 2024-11-12 09:31:01

原創

432 人瀏覽過

Why Should You Avoid Using Bind and Inline Arrow Functions in React's Render Method?

渲染方法中的綁定和內聯箭頭函數：後果和替代方案

簡介：

在React 中，如果在渲染方法中使用方法綁定或內聯箭頭函數，渲染效能可能會受到影響。這是因為它可以觸發創建新方法而不是重複使用現有方法，從而導致潛在的效能損失。

避免渲染方法中的綁定：

避免綁定render 方法中的問題，有以下幾種方法：

建構函式中的綁定： 可以使用this.methodName = this.methodName.bind( this);.
屬性初始化語法：屬性可以直接在類別中初始化為箭頭函數，如下所示：methodName = () =>; {...}.

處理綁定中傳遞的參數：

當涉及在綁定中傳遞額外參數時，有其他方法可以避免內聯render 方法中的箭頭函數：

建立自訂元件： 特定於元件的邏輯可以包裝在單獨的子元件中，傳遞必要的props 並處理其中的onClick 事件.
在外部作用域中使用箭頭函數：箭頭函數可以在渲染方法外部定義，將額外的參數作為參數傳遞給這些函數。

程式碼範例：

這是實作上述替代方法的範例：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  // Binding in constructor
  handleClick() {
    console.log("Constructor binding");
  }

  // Property initializer syntax
  deleteTodo = () => {
    console.log("Property initializer binding");
  };

  handleClickWithArgs = (el) => {
    console.log(`Delete todo: ${el}`);
  };

  render() {
    // Arrow function in constructor (no extra parameters)
    return (
      <div onClick={this.handleClick}>
        {" "}
        Click Me Constructor Binding{" "}
      </div>
    );
  }
}

function App() {
  const todos = ["a", "b", "c"];

  // Using arrow functions in the outer scope
  const handleDeleteTodo = (el) => {
    console.log(`Delete todo: ${el}`);
  };

  return (
    <div>
      {todos.map((el) => (
        <MyComponent key={el} onClick={handleDeleteTodo} />
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

登入後複製

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