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

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

假设我有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...
  }
}

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

使用相对较长的列表映射()需要大约10-20ms,我可以注意到界面中的小延迟。

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

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

5 个解决方案

#1

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.

您可以使用任何状态管理库来执行此操作,以便您的父级不跟踪this.state.list =>您的列表仅在添加新项目时重新呈现。并且单个项目在更新时将重新呈现。

Lets say you use redux.

让我们说你使用redux。

Your code will become something like this:

您的代码将变为如下所示:

// 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);

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

当然,您必须实现reducer和两个选择器getList和getItemByKey。

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

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

5 个解决方案

#1

更多相关文章

随机推荐