如何使用React diff演算法
- php中世界最好的语言原創
- 2018-06-07 11:00:192166瀏覽
這次帶給大家如何使用React diff演算法，使用React diff演算法的注意事項有哪些，以下就是實戰案例，一起來看一下。
前言
在上一篇文章，我們已經實作了React的元件功能，從功能的角度來說已經實作了React的核心功能了。
但是我們的實作方式有很大的問題：每次更新都重新渲染整個應用或整個元件，DOM操作十分昂貴，這樣效能損耗就非常大。
為了減少DOM更新，我們需要找渲染前後真正變化的部分，只更新這一部分DOM。而比較變化，找出需要更新部分的演算法我們稱為diff演算法。
對比策略
在前兩篇文章後，我們實作了一個render方法，它能將虛擬DOM渲染成真正的DOM ，我們現在就需要改進它，讓它不要再傻乎乎地重新渲染整個DOM樹，而是找出真正變化的部分。
這部分很多類React框架實現方式都不太一樣，有的框架會選擇保存上次渲染的虛擬DOM，然後對比虛擬DOM前後的變化，得到一系列更新的數據，然後再將這些更新應用到真正的DOM。
但也有一些框架會選擇直接對比虛擬DOM和真實DOM，這樣就不需要額外保存上一次渲染的虛擬DOM，並且能夠一邊對比一邊更新，這也是我們選擇的方式。
不管是DOM還是虛擬DOM，它們的結構都是一棵樹，完全對比兩棵樹變化的演算法時間複雜度是O(n^3)，但考慮到我們很少會跨層級移動DOM，所以我們只需要比較同一層級的變化。
只需要比較同一顏色框內的節點
總而言之，我們的diff演算法有兩個原則：
#比較目前真實的DOM和虛擬DOM，在比較過程中直接更新真實DOM
#只比較同一層級的變化實作
我們需要實作一個diff方法，它的作用是比較真實DOM和虛擬DOM，最後回傳更新後的DOM
/**
* @param {HTMLElement} dom 真实DOM
* @param {vnode} vnode 虚拟DOM
* @returns {HTMLElement} 更新后的DOM
*/
function diff( dom, vnode ) {
// ...
}
接下來就要實現這個方法。
在這之前先來回想一下我們虛擬DOM的結構:
虛擬DOM的結構可以分為三種，分別表示文字、原生DOM節點以及元件。
// 原生DOM节点的vnode
{
tag: 'p',
attrs: {
className: 'container'
},
children: []
}
// 文本节点的vnode
"hello,world"
// 组件的vnode
{
tag: ComponentConstrucotr,
attrs: {
className: 'container'
},
children: []
}
比較文字節點
首先考慮最簡單的文字節點，如果目前的DOM是文字節點，直接更新內容，否則就新建一個文字節點，並移除掉原來的DOM。
// diff text node
if ( typeof vnode === 'string' ) {
// 如果当前的DOM就是文本节点，则直接更新内容
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不是文本节点，则新建一个文本节点DOM，并移除掉原来的
} else {
out = document.createTextNode( vnode );
if ( dom && dom.parentNode ) {
dom.parentNode.replaceChild( out, dom );
}
}
return out;
}
文字節點十分簡單，它沒有屬性，也沒有子元素，所以這一步結束後就可以直接回傳結果了。
對比非文字DOM節點
如果vnode表示的是非文字的DOM節點，那就要分成幾種情況了：
如果真實DOM和虛擬DOM的類型不同，例如當前真實DOM是一個p，而vnode的tag的值是'button'，那麼原來的p就沒有利用價值了，直接新建一個button元素，並將p的所有子節點移到button下，然後用replaceChild方法將p替換成button。
if ( !dom || dom.nodeName.toLowerCase() !== vnode.tag.toLowerCase() ) {
out = document.createElement( vnode.tag );
if ( dom ) {
[ ...dom.childNodes ].map( out.appendChild ); // 将原来的子节点移到新节点下
if ( dom.parentNode ) {
dom.parentNode.replaceChild( out, dom ); // 移除掉原来的DOM对象
}
}
}
如果真實DOM和虛擬DOM是相同類型的，那我們暫時不需要做別的，只需要等待後面比較屬性和對比子節點。
對比屬性
其實diff演算法不只是找出節點類型的變化，它還要找出來節點的屬性以及事件監聽的變化。我們將對比屬性單獨拿出來作為一個方法：
function diffAttributes( dom, vnode ) {
const old = dom.attributes; // 当前DOM的属性
const attrs = vnode.attrs; // 虚拟DOM的属性
// 如果原来的属性不在新的属性当中，则将其移除掉（属性值设为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方法的實作請參考第一篇文章
對比子節點
##節點本身比較完成了，接下來就是比較它的子節點。这里会面临一个问题，前面我们实现的不同diff方法，都是明确知道哪一个真实DOM和虚拟DOM对比，但是子节点是一个数组，它们可能改变了顺序，或者数量有所变化，我们很难确定要和虚拟DOM对比的是哪一个。
为了简化逻辑，我们可以让用户提供一些线索：给节点设一个key值，重新渲染时对比key值相同的节点。
// 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的节点和没有key的节点分开
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，找到对应key值的节点
if ( key ) {
if ( keyed[ key ] ) {
child = keyed[ key ];
keyed[ key ] = undefined;
}
// 如果没有key，则优先找类型相同的节点
} 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;
}
}
}
// 对比
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 );
}
}
}
}
}对比组件
如果vnode是一个组件，我们也单独拿出来作为一个方法:
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;
}下面是相关的工具方法的实现，和上一篇文章的实现相比，只需要修改renderComponent方法其中的一行。
function renderComponent( component ) {
// ...
// base = base = _render( renderer ); // 将_render改成diff
base = diff( component.base, renderer );
// ...
}完整diff实现看这个文件
渲染
现在我们实现了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 (
<p>
<h1>count: { this.state.num }</h1>
<button onClick={ () => this.onClick()}>add</button>
</p>
);
}
}
不使用diff
使用上一篇文章的实现，从chrome的调试工具中可以看到，闪烁的部分是每次更新的部分，每次点击按钮，都会重新渲染整个组件。
使用diff
而实现了diff方法后，每次点击按钮，都只会重新渲染变化的部分。
后话
在这篇文章中我们实现了diff算法，通过它做到了每次只更新需要更新的部分，极大地减少了DOM操作。React实现远比这个要复杂，特别是在React 16之后还引入了Fiber架构，但是主要的思想是一致的。
实现diff算法可以说性能有了很大的提升，但是在别的地方仍然后很多改进的空间：每次调用setState后会立即调用renderComponent重新渲染组件，但现实情况是，我们可能会在极短的时间内多次调用setState。
假设我们在上文的Counter组件中写出了这种代码
onClick() {
for ( let i = 0; i < 100; i++ ) {
this.setState( { num: this.state.num + 1 } );
}
}
那以目前的实现，每次点击都会渲染100次组件，对性能肯定有很大的影响。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是如何使用React diff演算法的詳細內容。更多資訊請關注PHP中文網其他相關文章！