React：更新列表中的一项而不重新创建所有项目

假设我有一个包含 1000 个项目的列表。我用 React 渲染它，如下所示：

class Parent extends React.Component {
  render() {
    // this.state.list is a list of 1000 items
    return <List list={this.state.list} />;
  }
}

class List extends React.Component {
  render() {
    // here we're looping through this.props.list and creating 1000 new Items
    var list = this.props.list.map(item => {
      return <Item key={item.key} item={item} />;
    });
    return <div>{list}</div>;
  }
}

class Item extends React.Component {
  shouldComponentUpdate() {
    // here I comparing old state/props with new
  }
  render() {
    // some rendering here...
  }
}

对于相对较长的列表，map() 大约需要 10-20 毫秒，我可以注意到界面中有一点延迟。

当我只需要更新一个 React 对象时，我可以防止每次重新创建 1000 个 React 对象吗？

您可以使用任何状态管理库来完成此操作，以便您的Parent不跟踪this.state.list=> 你的List仅在新时重新渲染Item被添加。还有个人Item更新时将重新渲染。

假设你使用redux.

你的代码将变成这样：

// Parent.js
class Parent extends React.Component {
  render() {        
    return <List />;
  }
}

// List.js
class List extends React.Component {
  render() {        
    var list = this.props.list.map(item => {
      return <Item key={item.key} uniqueKey={item.key} />;
    });
    return <div>{list}</div>;
  }
}

const mapStateToProps = (state) => ({
  list: getList(state)
});

export default connect(mapStateToProps)(List);
 

// Item.js
class Item extends React.Component {
  shouldComponentUpdate() {
  }
  render() {
  }
}

const mapStateToProps = (state, ownProps) => ({
  item: getItemByKey(ownProps.uniqueKey)
});

export default connect(mapStateToProps)(Item);

当然，你必须实现reducer和两个选择器getList and getItemByKey.

有了这个，你List如果添加新元素或者更改，将触发重新渲染item.key（你不应该这样做）