Diff演算法的分析：利用React渲染流程分析-js教程-PHP中文網

本篇文章帶給大家的內容是關於Diff演算法的分析：利用React渲染流程分析，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

1、什麼是虛擬DOM

在React中，render執行的結果得到的並不是真正的DOM節點，結果只是輕量級的JavaScript對象，我們稱之為virtual DOM。

簡單的說，其實所謂的virtual DOM就是JavaScript物件到Html DOM節點的對應；即使用JavaScript物件將Html結構表示出來，而這個物件就是virtual DOM。
Html:

登入後複製

Item 1
Item 2

JavaScript物件表示法（virtual DOM）

{ tagName: 'ul', props: { id: 'list' }, children: [ {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]}, {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]}, ] }

登入後複製

2、何時會產生到virtual DOM

React生命週期擁有裝載、更新、卸載的三個階段；附上一張React生命週期圖

Diff演算法的分析：利用React渲染流程分析

前面提到：render執行的結果得到的並不是真正的DOM節點，結果只是輕量級的JavaScript對象，也就是在render函數呼叫時將會建立出虛擬DOM；

class Tab extends React.Component { render() { React.createElement( 'p', { className: 'class'}, 'Hello React' ) } }

登入後複製

Diff演算法的分析：利用React渲染流程分析

Diff演算法的分析：利用React渲染流程分析 #實作其實很簡單，主要是定義一個函數並把我們傳進去的參數組成一個React元素對象，而type就是我們傳進去的元件類型，可以是一個類別、函數或字串（如'p'）

React大致原始碼：

function createElement(type, config, children) { let propName; const props = {}; let key = null; let ref = null; let self = null; let source = null; if (config != null) { if (hasValidRef(config)) { // 如果有ref，将它取出来 ref = config.ref; } if (hasValidKey(config)) { // 如果有key，将它取出来 key = '' + config.key; } self = config.__self === undefined ? null : config.__self; source = config.__source === undefined ? null : config.__source; for (propName in config) { if ( hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName) ) { // 将除ref，key等这些特殊的属性放到新的props对象里 props[propName] = config[propName]; } } } // 获取子元素 const childrenLength = arguments.length - 2; if (childrenLength === 1) { props.children = children; } else if (childrenLength > 1) { const childArray = Array(childrenLength); for (let i = 0; i

登入後複製

#4、為什麼需要使用virtual DOM
DOM管理歷史階段：

#JS 或jQuery 操作DOM：當應用程式越來越複雜，需要在JS裡面維護的欄位也越來越多，需要監聽事件和在事件回呼叫更新頁面的DOM操作也越來越多，應用程式會變得非常難維護。

後來產出 MVC、MVP 的架構模式，期望從程式碼組織方式來降低維護難度。但 MVC 架構並沒辦法減少維護的狀態，也沒有降低狀態更新時需要對頁面的更新操作，你需要操作的DOM還是需要操作，只是換了個地方。

既然狀態改變了要操作對應的DOM元素，為什麼不做一個東西讓視圖和狀態綁定，狀態變更了視圖自動變更。這就是後來人們想出了MVVM 模式，只要在模版中宣告視圖元件是和什麼狀態進行綁定的，雙向綁定引擎就會在狀態更新的時候自動更新視圖;

但MVVM雙向資料綁定並不是唯一的辦法，還有一個非常直觀的方法：一旦狀態發生了變化，就用模版引擎重新渲染整個視圖，然後用新的視圖更換掉舊的視圖。

###React採用的就是第四種模式；但我們都知道對於操作DOM成本太高，而相對操作JavaScript就快速多了，而Html DOM可以很簡單的用JavaScript物件表示出來（Virtual DOM就這樣誕生了）############這樣的做法會導致很多的問題，最大的問題就是這樣做會很慢，因為即使一個小小的狀態變更都要重新建構整棵DOM，性價比太低；而React Virtual DOM在狀態更新過程加了一些特別的操作來避免整棵DOM 樹變更。 ############相關推薦：######################

以上是Diff演算法的分析：利用React渲染流程分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！