React:更新列表中的一项而不重新创建所有项 [英] React: update one item in a list without recreating all items

问题描述

假设我有一个包含 1000 个项目的列表.我用 React 渲染它，就像这样:

Let's say I have a list of 1000 items. And I rendering it with React, like this:

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 毫秒，我可以注意到界面中有一点延迟.

With a relatively long list map() takes about 10-20ms and I can notice a small lag in the interface.

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

Can I prevent recreation of 1000 React objects every time when I only need to update one?

推荐答案

您可以使用任何状态管理库来实现，这样您的 Parent 就不会跟踪 this.state.list => 您的 List 仅在添加新的 Item 时重新渲染.并且单个 Item 将在更新时重新渲染.

You can do it by using any state management library, so that your Parent doesn't keep track of this.state.list => your List only re-renders when new Item is added. And the individual Item will re-render when they are updated.

假设您使用 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和getItemByKey.

Of course, you have to implement the reducer and the two selectors getList and getItemByKey.

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

With this, you List re-render will be trigger if new elements added, or if you change item.key (which you shouldn't)

这篇关于React:更新列表中的一项而不重新创建所有项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！