反应状态阵列更新/渲染整个阵列，是否有解决方法？

Question

这是基本思路...

constructor(props) {
    super(props);
    this.state = {
        children: [{id:1},{id:2}], // HERE ARE THE TWO OBJECTS
        style: {top: 0}
    };
}

现在说我更新了这两个对象之一，但是这些对象被映射到组件数组。

<div className="thread">
    {this.state.children.map((child) =>
        <Post
            key={child.id}
            id={child.id}
        />
    )}
</div>

现在...当我更新这些对象之一时...

changeID (id, newID) { // this is a different function, just an example
    let temp = this.state.children;
    for (let i = 0; i < temp.length; i++) {
        if (temp[i].id === id) {
            temp[i].id = newID; // <- update this
        }
    }
    this.setState({
        children: temp // <- plug temp[] back as the updated state
    });
}

我将新状态放回去，但它会更新每个映射的对象。

// on one change to one element
id 1 POST UPDATED
id 2 POST UPDATED

1）它是否重新渲染了每个组件（在映射数组中），还是足够聪明以至于可以作为道具传递给映射组件的状态值是相同的？

2）如果该阵列明显更长，处理能力是否会非常昂贵？

3）如果可以，我该如何做得更好？赞赏建设性的批评。

谢谢！

Answer 1

这是这样的react工作原理，无论何时更改任何state变量，它都会重新渲染完整的组件并更新虚拟dom而不是实际dom，然后它将检查这两者之间的差异，并仅更改实际dom中的特定元素。

根据DOC：

React提供了一个声明性的API，因此您不必担心每次更新都会发生什么变化。

仅响应更新需要什么：

React DOM将元素及其子元素与上一个元素进行比较，并且仅应用必要的DOM更新以使DOM达到所需状态。

相同类型的DOM元素：

比较两个相同类型的React DOM元素时，React会查看两个元素的属性，保留相同的基础DOM节点，并仅更新更改的属性。

例如：

<div className="before" title="stuff" />

<div className="after" title="stuff" />

通过比较这两个元素，React知道只修改底层DOM节点上的className。

按键使用：

React支持key属性。当子项具有键时，React使用该键将原始树中的子项与后续树中的子项进行匹配。

小鬼：

按键可帮助React识别哪些项目已更改，添加或删除。应该为数组内的元素提供键，以赋予元素稳定的身份。数组中使用的键在同级之间应该唯一。但是，它们不必在全球范围内唯一。

例如：

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

现在，React知道键为“ 2014”的元素是新元素，而键为“ 2015”和“ 2016”的元素刚刚移动。

查看本文： Virtual-DOM和差异在React中如何工作