反應對帳是否以此方式工作？

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次。

代碼沙箱

Answer 1

首先，我警告您我不確定100％，但是這是我的答案。
當您更新App Component時，其render()方法將多次調用Item Component，這將調用其render()方法（即顯示"Item" 。

現在， render()方法和Component只是一個函數，因此在被調用時便被執行：這是JavaScript，兩者之間沒有React魔術（甚至不包括對帳）。

但是，當React魔術（在本例中為和解）啟動時？ 看看這個gif，其中我在記錄您的codeandbox時記錄了DOM元素瀏覽器：

如您所見，當我單擊“提交”按鈕時，由於對帳，並不是所有div元素都被更新，而是最后一個，因為它是新的。
發生這種情況的原因是，由於您已為div分配了key道具，因此React可以識別舊的div ，看到它們沒有更改，因此不會修改這些div的DOM。

因此，總而言之，和解和React render()方法是兩個獨立的事物，在兩個不同的時刻運行。

這是否回答您的問題？

Answer 2

React Reconciliation指出，通過比較每個Item的key Item React不必銷毀DOM節點並在每個渲染器上重新創建它們（如果它們與數組的先前狀態匹配）。 它仍然會遍歷數組中的每個項目（這就是為什么要獲得每個項目的console.logs原因），但是如果看到匹配的鍵值，它將不會執行昂貴的操作（重新創建DOM節點）。