Question

这里的数组更新是不可变的，只会创建新的数组，而不更新旧的数组。

因此，在此子组件Item中，应仅对新数组值（索引）进行一次A / c调用，但应多次调用。

代码示例：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  state = {
    arr: [10]
  };

  updateArray = () => {
    console.log("updateArray");
    let { arr } = this.state;
    this.setState({ arr: [...arr, 20] });
  };

  render() {
    const { arr } = this.state;
    return (
      <div>
        {arr.map((el, index) => {
          console.log("sasasa", index);
          return <Item el={el} key={index} />;
        })}
        <input type={"button"} value={"submit"} onClick={this.updateArray} />
      </div>
    );
  }
}

class Item extends React.Component {
  render() {
    console.log("Item");
    return <div>{this.props.el}</div>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);`

控制台输出在第三次单击按钮时将如下所示

Item 
Item 
Item

在这里我们可以看到Item组件对数组中的所有元素都呈现了3次；

Code Sandbox

Answer 1

首先，我警告您我不确定100％，但是这是我的答案。
当您更新App组件时，其render()方法将多次调用Item组件，后者将调用其render()方法（显示{{1}的方法） }。

现在，"Item"方法和组件不过是一个函数，因此，在调用它们时，它们就被执行：这是JavaScript，两者之间没有React魔术（甚至不包括和解）。

但是，当React Magic（在本例中为“和解”）启动时？看看这个gif，其中我在记录您的codeandbox时记录了DOM元素浏览器：

如您所见，当我单击“提交”按钮时，由于对帐，并不是所有render()元素都被更新，而是最后一个，因为它是新的。
发生这种情况的原因是，由于您已分配给div的{{1}}道具，React可以识别旧的key，看到它们没有更改，因此不会修改DOM那些div。

因此，总而言之，对帐和React div方法是两个独立的事物，在两个不同的时刻运行。

这是对您问题的答案吗？

Answer 2

反应对帐指出，通过比较每个key的{{1}}道具，React不必销毁DOM节点并在每个渲染器上重新创建它们（如果它们与数组的先前状态匹配）。它仍然会遍历数组中的每个项目（这就是为什么每个项目都得到Item的原因，但是如果看到匹配的键值，它将不会执行昂贵的操作（重新创建DOM节点）。

反应对帐是否以此方式工作？

2 个答案: