React diff算法的實(shí)現(xiàn)示例
前言
在上一篇文章，我們已經(jīng)實(shí)現(xiàn)了React的組件功能，從功能的角度來說已經(jīng)實(shí)現(xiàn)了React的核心功能了。
但是我們的實(shí)現(xiàn)方式有很大的問題：每次更新都重新渲染整個(gè)應(yīng)用或者整個(gè)組件，DOM操作十分昂貴，這樣性能損耗非常大。
為了減少DOM更新，我們需要找渲染前后真正變化的部分，只更新這一部分DOM。而對(duì)比變化，找出需要更新部分的算法我們稱之為diff算法。
對(duì)比策略
在前面兩篇文章后，我們實(shí)現(xiàn)了一個(gè)render方法，它能將虛擬DOM渲染成真正的DOM，我們現(xiàn)在就需要改進(jìn)它，讓它不要再傻乎乎地重新渲染整個(gè)DOM樹，而是找出真正變化的部分。
這部分很多類React框架實(shí)現(xiàn)方式都不太一樣，有的框架會(huì)選擇保存上次渲染的虛擬DOM，然后對(duì)比虛擬DOM前后的變化，得到一系列更新的數(shù)據(jù)，然后再將這些更新應(yīng)用到真正的DOM上。
但也有一些框架會(huì)選擇直接對(duì)比虛擬DOM和真實(shí)DOM，這樣就不需要額外保存上一次渲染的虛擬DOM，并且能夠一邊對(duì)比一邊更新，這也是我們選擇的方式。
不管是DOM還是虛擬DOM，它們的結(jié)構(gòu)都是一棵樹，完全對(duì)比兩棵樹變化的算法時(shí)間復(fù)雜度是O(n^3)，但是考慮到我們很少會(huì)跨層級(jí)移動(dòng)DOM，所以我們只需要對(duì)比同一層級(jí)的變化。
只需要對(duì)比同一顏色框內(nèi)的節(jié)點(diǎn)
總而言之，我們的diff算法有兩個(gè)原則：
- 對(duì)比當(dāng)前真實(shí)的DOM和虛擬DOM，在對(duì)比過程中直接更新真實(shí)DOM
- 只對(duì)比同一層級(jí)的變化實(shí)現(xiàn)
我們需要實(shí)現(xiàn)一個(gè)diff方法，它的作用是對(duì)比真實(shí)DOM和虛擬DOM，最后返回更新后的DOM
/**
* @param {HTMLElement} dom 真實(shí)DOM
* @param {vnode} vnode 虛擬DOM
* @returns {HTMLElement} 更新后的DOM
*/
function diff( dom, vnode ) {
// ...
}
接下來就要實(shí)現(xiàn)這個(gè)方法。
在這之前先來回憶一下我們虛擬DOM的結(jié)構(gòu):
虛擬DOM的結(jié)構(gòu)可以分為三種，分別表示文本、原生DOM節(jié)點(diǎn)以及組件。
// 原生DOM節(jié)點(diǎn)的vnode
{
tag: 'div',
attrs: {
className: 'container'
},
children: []
}
// 文本節(jié)點(diǎn)的vnode
"hello,world"
// 組件的vnode
{
tag: ComponentConstrucotr,
attrs: {
className: 'container'
},
children: []
}
對(duì)比文本節(jié)點(diǎn)
首先考慮最簡(jiǎn)單的文本節(jié)點(diǎn)，如果當(dāng)前的DOM就是文本節(jié)點(diǎn)，則直接更新內(nèi)容，否則就新建一個(gè)文本節(jié)點(diǎn)，并移除掉原來的DOM。
// diff text node
if ( typeof vnode === 'string' ) {
// 如果當(dāng)前的DOM就是文本節(jié)點(diǎn)，則直接更新內(nèi)容
if ( dom && dom.nodeType === 3 ) { // nodeType: https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType
if ( dom.textContent !== vnode ) {
dom.textContent = vnode;
}
// 如果DOM不是文本節(jié)點(diǎn)，則新建一個(gè)文本節(jié)點(diǎn)DOM，并移除掉原來的
} else {
out = document.createTextNode( vnode );
if ( dom && dom.parentNode ) {
dom.parentNode.replaceChild( out, dom );
}
}
return out;
}
文本節(jié)點(diǎn)十分簡(jiǎn)單，它沒有屬性，也沒有子元素，所以這一步結(jié)束后就可以直接返回結(jié)果了。
對(duì)比非文本DOM節(jié)點(diǎn)
如果vnode表示的是一個(gè)非文本的DOM節(jié)點(diǎn)，那就要分幾種情況了：
如果真實(shí)DOM和虛擬DOM的類型不同，例如當(dāng)前真實(shí)DOM是一個(gè)div，而vnode的tag的值是'button'，那么原來的div就沒有利用價(jià)值了，直接新建一個(gè)button元素，并將div的所有子節(jié)點(diǎn)移到button下，然后用replaceChild方法將div替換成button。
if ( !dom || dom.nodeName.toLowerCase() !== vnode.tag.toLowerCase() ) {
out = document.createElement( vnode.tag );
if ( dom ) {
[ ...dom.childNodes ].map( out.appendChild ); // 將原來的子節(jié)點(diǎn)移到新節(jié)點(diǎn)下
if ( dom.parentNode ) {
dom.parentNode.replaceChild( out, dom ); // 移除掉原來的DOM對(duì)象
}
}
}
如果真實(shí)DOM和虛擬DOM是同一類型的，那我們暫時(shí)不需要做別的，只需要等待后面對(duì)比屬性和對(duì)比子節(jié)點(diǎn)。
對(duì)比屬性
實(shí)際上diff算法不僅僅是找出節(jié)點(diǎn)類型的變化，它還要找出來節(jié)點(diǎn)的屬性以及事件監(jiān)聽的變化。我們將對(duì)比屬性單獨(dú)拿出來作為一個(gè)方法：
function diffAttributes( dom, vnode ) {
const old = dom.attributes; // 當(dāng)前DOM的屬性
const attrs = vnode.attrs; // 虛擬DOM的屬性
// 如果原來的屬性不在新的屬性當(dāng)中，則將其移除掉（屬性值設(shè)為undefined）
for ( let name in old ) {
if ( !( name in attrs ) ) {
setAttribute( dom, name, undefined );
}
}
// 更新新的屬性值
for ( let name in attrs ) {
if ( old[ name ] !== attrs[ name ] ) {
setAttribute( dom, name, attrs[ name ] );
}
}
}
setAttribute方法的實(shí)現(xiàn)參見第一篇文章
對(duì)比子節(jié)點(diǎn)
節(jié)點(diǎn)本身對(duì)比完成了，接下來就是對(duì)比它的子節(jié)點(diǎn)。
這里會(huì)面臨一個(gè)問題，前面我們實(shí)現(xiàn)的不同diff方法，都是明確知道哪一個(gè)真實(shí)DOM和虛擬DOM對(duì)比，但是子節(jié)點(diǎn)是一個(gè)數(shù)組，它們可能改變了順序，或者數(shù)量有所變化，我們很難確定要和虛擬DOM對(duì)比的是哪一個(gè)。
為了簡(jiǎn)化邏輯，我們可以讓用戶提供一些線索：給節(jié)點(diǎn)設(shè)一個(gè)key值，重新渲染時(shí)對(duì)比key值相同的節(jié)點(diǎn)。
// diff方法
if ( vnode.children && vnode.children.length > 0 || ( out.childNodes && out.childNodes.length > 0 ) ) {
diffChildren( out, vnode.children );
}
function diffChildren( dom, vchildren ) {
const domChildren = dom.childNodes;
const children = [];
const keyed = {};
// 將有key的節(jié)點(diǎn)和沒有key的節(jié)點(diǎn)分開
if ( domChildren.length > 0 ) {
for ( let i = 0; i < domChildren.length; i++ ) {
const child = domChildren[ i ];
const key = child.key;
if ( key ) {
keyedLen++;
keyed[ key ] = child;
} else {
children.push( child );
}
}
}
if ( vchildren && vchildren.length > 0 ) {
let min = 0;
let childrenLen = children.length;
for ( let i = 0; i < vchildren.length; i++ ) {
const vchild = vchildren[ i ];
const key = vchild.key;
let child;
// 如果有key，找到對(duì)應(yīng)key值的節(jié)點(diǎn)
if ( key ) {
if ( keyed[ key ] ) {
child = keyed[ key ];
keyed[ key ] = undefined;
}
// 如果沒有key，則優(yōu)先找類型相同的節(jié)點(diǎn)
} else if ( min < childrenLen ) {
for ( let j = min; j < childrenLen; j++ ) {
let c = children[ j ];
if ( c && isSameNodeType( c, vchild ) ) {
child = c;
children[ j ] = undefined;
if ( j === childrenLen - 1 ) childrenLen--;
if ( j === min ) min++;
break;
}
}
}
// 對(duì)比
child = diff( child, vchild );
// 更新DOM
const f = domChildren[ i ];
if ( child && child !== dom && child !== f ) {
if ( !f ) {
dom.appendChild(child);
} else if ( child === f.nextSibling ) {
removeNode( f );
} else {
dom.insertBefore( child, f );
}
}
}
}
}
對(duì)比組件
如果vnode是一個(gè)組件，我們也單獨(dú)拿出來作為一個(gè)方法:
function diffComponent( dom, vnode ) {
let c = dom && dom._component;
let oldDom = dom;
// 如果組件類型沒有變化，則重新set props
if ( c && c.constructor === vnode.tag ) {
setComponentProps( c, vnode.attrs );
dom = c.base;
// 如果組件類型變化，則移除掉原來組件，并渲染新的組件
} else {
if ( c ) {
unmountComponent( c );
oldDom = null;
}
c = createComponent( vnode.tag, vnode.attrs );
setComponentProps( c, vnode.attrs );
dom = c.base;
if ( oldDom && dom !== oldDom ) {
oldDom._component = null;
removeNode( oldDom );
}
}
return dom;
}
下面是相關(guān)的工具方法的實(shí)現(xiàn)，和上一篇文章的實(shí)現(xiàn)相比，只需要修改renderComponent方法其中的一行。
function renderComponent( component ) {
// ...
// base = base = _render( renderer ); // 將_render改成diff
base = diff( component.base, renderer );
// ...
}
完整diff實(shí)現(xiàn)看這個(gè)文件
渲染
現(xiàn)在我們實(shí)現(xiàn)了diff方法，我們嘗試渲染上一篇文章中定義的Counter組件，來感受一下有無diff方法的不同。
class Counter extends React.Component {
constructor( props ) {
super( props );
this.state = {
num: 1
}
}
onClick() {
this.setState( { num: this.state.num + 1 } );
}
render() {
return (
<div>
<h1>count: { this.state.num }</h1>
<button onClick={ () => this.onClick()}>add</button>
</div>
);
}
}
不使用diff
使用上一篇文章的實(shí)現(xiàn)，從chrome的調(diào)試工具中可以看到，閃爍的部分是每次更新的部分，每次點(diǎn)擊按鈕，都會(huì)重新渲染整個(gè)組件。
使用diff
而實(shí)現(xiàn)了diff方法后，每次點(diǎn)擊按鈕，都只會(huì)重新渲染變化的部分。
后話
在這篇文章中我們實(shí)現(xiàn)了diff算法，通過它做到了每次只更新需要更新的部分，極大地減少了DOM操作。React實(shí)現(xiàn)遠(yuǎn)比這個(gè)要復(fù)雜，特別是在React 16之后還引入了Fiber架構(gòu)，但是主要的思想是一致的。
實(shí)現(xiàn)diff算法可以說性能有了很大的提升，但是在別的地方仍然后很多改進(jìn)的空間：每次調(diào)用setState后會(huì)立即調(diào)用renderComponent重新渲染組件，但現(xiàn)實(shí)情況是，我們可能會(huì)在極短的時(shí)間內(nèi)多次調(diào)用setState。
假設(shè)我們?cè)谏衔牡腃ounter組件中寫出了這種代碼
onClick() {
for ( let i = 0; i < 100; i++ ) {
this.setState( { num: this.state.num + 1 } );
}
}
那以目前的實(shí)現(xiàn)，每次點(diǎn)擊都會(huì)渲染100次組件，對(duì)性能肯定有很大的影響。
下一篇文章我們就要來改進(jìn)setState方法
這篇文章的代碼：https://github.com/hujiulong/simple-react/tree/chapter-3
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何用react優(yōu)雅的書寫CSS，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下2021-04-04
如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過濾器
這篇文章主要介紹了如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過濾器,在vue及react中經(jīng)常會(huì)遇到，今天通過實(shí)例代碼給大家講解，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了react中使用usestate踩坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
詳解如何用webpack4從零開始構(gòu)建react開發(fā)環(huán)境
這篇文章主要介紹了詳解如何用webpack4從零開始構(gòu)建react開發(fā)環(huán)境，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
組件的生命周期就是React的工作過程，就好比人有生老病死，自然界有日月更替，每個(gè)組件在網(wǎng)頁(yè)中也會(huì)有被創(chuàng)建、更新和刪除，如同有生命的機(jī)體一樣2022-12-12
本篇文章主要介紹了React Native 環(huán)境搭建的教程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
react-native使用react-navigation進(jìn)行頁(yè)面跳轉(zhuǎn)導(dǎo)航的示例
本篇文章主要介紹了react-native使用react-navigation進(jìn)行頁(yè)面跳轉(zhuǎn)導(dǎo)航的示例，具有一定的參考價(jià)值，有興趣的可以了解一下2017-09-09
詳解react、redux、react-redux之間的關(guān)系
這篇文章主要介紹了詳解react、redux、react-redux之間的關(guān)系，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
react實(shí)現(xiàn)一個(gè)優(yōu)雅的圖片占位模塊組件詳解
這篇文章主要給大家介紹了關(guān)于react如何實(shí)現(xiàn)一個(gè)還算優(yōu)雅的占位模塊圖片組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
這篇文章主要介紹了如何基于react實(shí)現(xiàn)下拉刷新效果,在下拉的時(shí)候會(huì)進(jìn)入loading狀態(tài),文中有詳細(xì)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-03-03