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

您应该仅将函数的引用传递给item组件，然后在其中调用它。

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

来自子组件的React PureComponent传递参数

1 个答案: