React：是否可以在不更新其兄弟姐妹的情况下将项目添加到列表中？

问题描述

比方说我有：

class Item extends React.Component {
  render() {
    console.log('Let's assume this does something slow...');
    return <li>{this.props.text}</li>;
  }
}


class List extends React.Component {
  constructor() {
    super();
    this.state = {
      items: [],
    };
  }
  addItem = text => {
    this.setState({
      // Mutates the array reference... is there a way around it?
      items: this.state.items.concat({ id: Math.random(), text }),
    });
  };
  render() {
    return (
      <div>
        <button onClick={() => this.addItem(Math.random())}>Add Item</button>
        <ul>
          // This will run on every render, re-rendering the whole list...
          {this.state.items.map(item => (
            <Item key={item.id} text={item.text} />
          ))}
        </ul>
      </div>
    );
  }
}

是否有可能使现有列表保持不变，我只是在顶部/底部添加一个新项目而不调用其兄弟姐妹的render() ？