Question

这是基本想法......

<TextBlock Grid.Column="1"
            Margin="2"
            Text="{Binding Path=Header, RelativeSource={RelativeSource AncestorType=UserControl}, FallbackValue=Header}"
            Foreground="Black"
            FontWeight="Bold"
            FontSize="14" 
            />

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

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

1）它是否重新渲染 EVERY 组件（在映射的数组中），还是足够聪明地告诉作为props传递给映射组件的状态值是否相同？

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

3）如果是，我怎样才能更好地解决这个问题？建设性的批评是值得赞赏的。

谢谢！

Answer 1

这就是react的工作方式，每当你更改任何state变量时，它将重新渲染完整的组件并更新虚拟dom而不是实际的dom，然后它将检查这两者之间的差异并且只改变实际dom中的那个特定元素。

根据DOC：

React提供声明性API，因此您不必担心确切地说每次更新都会发生什么变化。

<强> React Only Updates What's Necessary:

React DOM将元素及其子元素与前一元素进行比较，并且只应用将DOM带到的DOM更新期望的状态。

DOM Elements Of The Same Type:

当比较两个相同类型的React DOM元素时，React会查看两者的属性保持相同的底层DOM节点，并且仅保留更新已更改的属性。

例如：

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

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

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

<强> Use of Keys

React支持关键属性。当孩子有钥匙时，React会使用将原始树中的孩子与孩子们中的孩子相匹配的关键后续的树。

Imp:

键帮助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知道带有键＆＃39; 2014＆＃39;的元素。是新的，带有键的元素＆＃39; 2015＆＃39;和＆＃39; 2016＆＃39;刚搬家。

查看此文章：How Virtual-DOM and diffing works in React

React状态数组更新/呈现整个数组，是否有解决方法？

1 个答案: