Question

我有一个Lists组件，该组件包含许多列表，其呈现功能如下：

var items = this.props.items;
  var lists = this.props.lists;
  var addItem = this.props.addItem;
  return (
    <div key={uuidv4()}>
    {lists.map(function(listName) {
      return (
        <List name={listName} items={items[listName]} addItem={addItem.bind(this)} key={uuidv4()} />
      )
    })}
    </div>
  );
}

我的问题是，当我将项目添加到某个列表中时，即使其道具没有更改，每个列表也会重新呈现。我曾尝试在列表组件中使用shouldComponentUpdate：

shouldComponentUpdate(nextProps, nextState) {
  return this.props.items !== nextProps.items;
}

但是它不会阻止列表重新呈现。 PureComponent似乎也不起作用。有没有更好的方法来构造我的代码，从而避免这些不必要的渲染？

编辑：这是处理添加项目的代码。请注意，s是列表的状态：

handleAddItem(s) {
      let listName = s.name;
      let newlist = this.state.items[listName];

      newlist.push({name: [s.newItem]});
      this.setState(prevState => ({
        items: {
          ...prevState.items,
          [listName]: newlist
        }
      }));
  }

它在我的App组件中，该组件呈现Lists组件：

<Lists lists={this.state.lists} items={this.state.items} addItem={this.handleAddItem.bind(this)} />

React防止子组件重新呈现

0 个答案: