在 React 的 Render 方法中绑定或内联箭头函数时如何避免性能问题？

如何避免在渲染方法中绑定或内联箭头函数

在 React 组件中，避免在渲染方法中绑定或内联箭头函数以优化性能至关重要。重新渲染期间，会创建新方法而不是重用旧方法，从而导致性能问题。

考虑以下示例：

<input onChange={this._handleChange.bind(this)} />

为了解决这个问题，我们可以绑定 _handleChange构造函数中的方法：

constructor(props) {
  super(props);
  this._handleChange = this._handleChange.bind(this);
}

或者，我们可以使用属性初始值设定项语法：

_handleChange = () => {};

但是，当我们需要将其他参数传递给 onClick 处理程序时，就会出现挑战。例如，在待办事项应用程序中，我们可能需要根据其索引或名称从数组中删除项目。

todos.map(el => <div key={el} onClick={this._deleteTodo.bind(this, el)}>{el}</div>)

此方法会为每个组件渲染创建一个新的回调，如文档中所述.

渲染方法内部绑定的替代方案

1.创建子组件：

将映射函数内的内容移动到单独的子组件并将值作为 props 传递。这样，就可以从子组件调用该函数，并将值传递给作为 props 向下传递的函数。

Parent:

deleteTodo = (val) => {
  console.log(val);
};

todos.map((el) => <MyComponent val={el} onClick={this.deleteTodo} />);

子组件（MyComponent）：

class MyComponent extends React.Component {
  deleteTodo = () => {
    this.props.onClick(this.props.val);
  };

  render() {
    return <div onClick={this.deleteTodo}>{this.props.val}</div>;
  }
}

示例片段：

class Parent extends React.Component {
  _deleteTodo = (val) => {
    console.log(val);
  };

  render() {
    var todos = ['a', 'b', 'c'];
    return (
      <div>
        {todos.map((el) => (
          <MyComponent key={el} val={el} onClick={this._deleteTodo} />
        ))}
      </div>
    );
  }
}

class MyComponent extends React.Component {
  _deleteTodo = () => {
    console.log('here');
    this.props.onClick(this.props.val);
  };

  render() {
    return <div onClick={this._deleteTodo}>{this.props.val}</div>;
  }
}

ReactDOM.render(<Parent />, document.getElementById('app'));

通过实现这些替代方案，我们可以避免在渲染方法内绑定或内联箭头函数，从而确保组件的适当性能和可重用性。

以上是在 React 的 Render 方法中绑定或内联箭头函数时如何避免性能问题？的详细内容。更多信息请关注PHP中文网其他相关文章！