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

Avoiding Inline Arrow Functions in Render Methods

It is recommended to avoid inline arrow functions such as this._handleChange.bind(this) within the render method of a React component.

Reason:

During re-rendering, React will create new methods instead of reusing the old ones. This can adversely affect performance by causing unnecessary function creation and memory allocation.

Alternatives:

There are several ways to bypass binding arrow functions inside the render method:

1. Constructor Binding:

• Bind the method in the constructor: this._handleChange = this._handleChange.bind(this);

• Example:

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

2. Property Initializer Syntax:

• Define the method using property initializer syntax: _handleChange = () => { ... };

• Example:

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

3. Event Handling with Callback Functions:

• Create a separate callback function that receives the necessary arguments:

• Example:

  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. Component-Scoped Arrow Functions:

• Declare the arrow function outside the render method but within the component class scope:

• Example:

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

5. External Event Handlers:

• Move the event handling logic to an external component or a helper function to avoid binding within the render method:

• Example:

  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>;
     }
  }

These alternatives offer efficient methods to handle events within React components without sacrificing performance or introducing unnecessary function binding.

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