• React與ReactDOM是2個不同的庫，根節點內的所有內容（和DOM更新、渲染相關）由ReactDOM來管理
• 一個React應用只有一個根節點
• 用ReactDOM.render將React元素渲染到根節點

ReactDOM.render

• 參數1 React元素（React.createElement(類組件/函數組件) or <類組件/函數組件/> or JSX語法組件）包裹后函數組件才會執行
• 參數2 根節點

基本的更新邏輯

• React元素是不可變的對象 immutable Object
• 不能添加屬性
• 不能修改屬性（但不是深度的不可變）
• 不能刪除屬性
• 不能修改屬性的枚舉、配置、可寫 （enumerable/configrable/writable）

虛擬DOM

ReactDOM.render會深度對比新舊元素的狀態，只會做必要的真實DOM更新

• 渲染之前 → 每個React元素組成一個虛擬DOM的對象結構 → 渲染
• 更新之前 → 形成新的虛擬DOM對象結構 → 對比新舊虛擬DOM節點 → 分析出兩者不同處 → 形成一個DOM更新的補丁 → 操作真實DOM

function update() {const rEl = (<div><h1>以下顯示時間</h1><h2>{new Date().toString()}</h2></div>)ReactDOM.render(rEl,document.getElementById('app')) } setInterval(update, 1000)

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的03 渲染元素ReactDOM.render的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。