javascript - React Pure Component 从子组件传递参数

Question

我有一个 TodosList 组件，它呈现 Todo 组件列表。

这是 Todo 组件:

export class Todo extends React.PureComponent {
  render() {
    return (
      <li onClick={this.props.onClick}>
        {this.props.title}
      </li>
    );
  }
}

这是 TodoList 组件:

export class TodoList extends React.PureComponent {
  toggleTodo = id => this.props.toggleTodo(id);

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ul>
        {this.props.todos.map(todo => (
          <Todo
            key={todo.id}
            {...todo}
            onClick={this.toggleTodo.bind(null, todo.id)}
          />
        ))}
      </ul>
    );
  }
}

代码的问题在于，bind 创建了一个新函数，即使没有任何更改，该函数也会导致纯组件重新渲染。

我该如何解决这个问题？

解决方案可以是这样的:

export class Todo extends React.PureComponent {
  render() {
    return (
      <li onClick={this.props.onClick.bind(null, this.props.id)}>
        {this.props.title}
      </li>
    );
  }
}

但我想知道这是否是一个好的解决方案。

Answer 1

您应该仅将函数的引用传递给项目组件，并在那里调用它。

export class TodoList extends React.PureComponent {
  render() {
   return (
    <ul>
      {this.props.todos.map(todo => (
      <Todo
        key={todo.id}
        {...todo}
        handleClick={this.props.toggleTodo}
      />
    ))}
  </ul>
  );
 }
}

为此，您不需要有状态组件。

const todo = ({id, title, handleClick} => (
     <li onClick={() => handleClick(id)}>
       {title}
     </li>
   );
export default todo