假設我們有一個檔案HomePage.js：
export default class HomePage extends Component {
constructor(props) {
super(props)
this.index = 0
}
render() {
return (
<p>This is the home page number: {this.index }</p>
)
}
}
還有一個App.js：
import React, { Component } from "react";
import { createRoot } from 'react-dom/client';
import HomePage from "./HomePage";
export default class App extends Component {
constructor(props) {
super(props)
this.index = 0
}
render() {
if (this.index < 10)
return (
<div>
<HomePage />
</div>
)
return (
<div>
<HomePage />
<HomePage />
</div>
)
}
}
function homePageTick () {
const element = (
<App />
)
root.render(element)
}
const appDiv = document.getElementById("app")
const root = createRoot(appDiv)
setInterval(homePageTick, 1000)
請原諒我的代碼很長，但有必要解釋我的問題。
總結一下代碼的實際作用：我相信，首先，它創建了一個HomePage實體，其計數器從零開始并向上計數。10 秒后，它創建另一個HomePage實體，其計數器從零開始計數。
這讓我大吃一驚！我以為每秒HomePage都會創建一個新實體，因此計數器只會顯示零！react如何知道哪個實體是哪個？它怎么知道在 10 秒后才需要創建新實體？如何創建一個新實體來替換第一個實體，重新啟動計數器？
uj5u.com熱心網友回復：
首先，這種模式非常奇怪：
function homePageTick () {
root.render(<App/>)
}
setInterval(homePageTick, 1000)
您應該root.render只呼叫一次，然后使用效果和狀態來更改應用程式的內容。
現在你的問題是，當 React 重新渲染并在同一個地方看到同一個組件時，它會重用現有的實體。當 React 比較兩棵樹<div><HomePage/></div>和<div><HomePage/></div>時，它發現它們是相同的（因為HomePage === HomePage），因此重用現有HomePage實體（為了不丟失內部狀態）。10 秒后，當比較<div><HomePage/></div>and時<div><HomePage/><HomePage/></div>，它將HomePage為第一個組件重用現有組件，并為第二個組件創建一個以前不存在的新組件。
如果你想強制 React 創建同一個組件的新實體，你可以給它們不同的key屬性。例如<HomePage key={this.index}/>.
您可以閱讀https://reactjs.org/docs/reconciliation.html了解更多資訊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/507070.html
標籤：javascript 反应