接下来主要优化一下组件的更新
从之前文章可以知道，我们组件是通过createElement然后遍历children属性，完成整个dom的创建，其实是相当耗费性能的，react之所以能实现高性能，是因为它实现了局部dom的更新，而不是像我们_render方法里面那么简单粗暴。
function _render(vnode) {
if (vnode === undefined || vnode === null || typeof vnode === 'boolean') vnode = '';
if (typeof vnode === 'number') vnode = String(vnode);
if (typeof vnode === 'string') {
let textNode = document.createTextNode(vnode);
return textNode;
}
if (typeof vnode.tag === 'function') {
const component = createComponent(vnode.tag, vnode.attrs);
setComponentProps(component, vnode.attrs);
return component.base;
}
const dom = document.createElement(vnode.tag);
if (vnode.attrs) {
Object.keys(vnode.attrs).forEach(key => {
const value = vnode.attrs[key];
setAttribute(dom, key, value);
});
}
vnode.children.forEach(child => render(child, dom)); // 递归渲染子节点
return dom;
}
先定义一个diff的算法，传入原来通过createElement创建的dom和新的node（JSX解析出来的返还），diff主要通过新的对象与已有的dom对比，决定是否需要创建或者更新dom，如下面：
{"tag":"div","attrs":null,"children":["Text",{"tag":"div","attrs":null,"children":["Count: ",0]},{"tag":"button","attrs":{},"children":["Add"]}]}
diff函数
function diff( dom, vnode, container ) {
const ret = diffNode( dom, vnode );
if ( container && ret.parentNode !== container ) {
container.appendChild( ret );
}
return ret;
}
diffNode做同级节点对比，同时递归便利字节点
function diffNode( dom, vnode ) {
let out = dom;
if ( vnode === undefined || vnode === null || typeof vnode === 'boolean' )
{
vnode = '';
}
if ( typeof vnode === 'number' ) vnode = String( vnode );
// 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;
}
if ( typeof vnode.tag === 'function' ) {
return diffComponent( dom, vnode );
}
//
if ( !dom || !isSameNodeType( dom, vnode ) ) {
out = document.createElement( vnode.tag );
if ( dom ) {
[ ...dom.childNodes ].map( out.appendChild ); // 将原来的子节点移到新节点下
if ( dom.parentNode ) {
dom.parentNode.replaceChild( out, dom ); // 移除掉原来的DOM对象
}
}
}
if ( vnode.children && vnode.children.length > 0 || ( out.childNodes && out.childNodes.length > 0 ) ) {
diffChildren( out, vnode.children );
}
diffAttributes( out, vnode );
return out;
}
diffChildren相对麻烦，因为要针对key进行优化，具体原因可以参考：https://jdc.jd.com/archives/212685
function diffChildren( dom, vchildren ) {
const domChildren = dom.childNodes;
const children = [];
const keyed = {};
if ( domChildren.length > 0 ) {
for ( let i = 0; i < domChildren.length; i++ ) {
const child = domChildren[ i ];
const key = child.key;
if ( key ) {
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;
if ( key ) {
if ( keyed[ key ] ) {
child = keyed[ key ];
keyed[ key ] = undefined;
}
} 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 = diffNode( child, vchild );
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 );
}
}
}
}
}
最后还有diffcomponent的函数，主要是component有unmount的生命周期需要实现。注意一下，vnode返回的的tag就是component的构建函数，这一步是babel帮我们转换的，加入vnode的tag跟原本_component的constructor不同，可以认为原来的组件已经卸载了
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;
}
使用以下代码进行测试
import React from './react';
// end with react frame work
class Count extends React.Component {
constructor() {
super();
this.state = {
count: 0,
}
setInterval(()=>{
this.setState({
count: this.state.count+1,
})
}, 1000)
}
render() {
return
Text
Count: {this.state.count}
;
}
}
const ReactDOM = {
render: (vnode, container) => {
container.innerHTML = '';
return React.render(vnode, container);
},
};
const element = 原本的加载方式，不使用diff，而是每次更新state触发renderComponent时都是重新创建整个dom，base = _render(renderer)，打开chrome可以看到，整个root都是重新挂载的：
image.png
我们把renderComponent里面base = _render(renderer)替换为上面的函数base = diff( component.base, renderer ):
function renderComponent(component) {
let base;
const renderer = component.render();
if (component.base && component.componentWillUpdate) {
component.componentWillUpdate();
}
console.log('component.base');
console.log(component.base);
console.log('renderer');
console.log(JSON.stringify(renderer));
//base = _render(renderer);
base = diff(component.base, renderer);
if (component.base) {
if (component.componentDidUpdate) component.componentDidUpdate();
} else if (component.componentDidMount) {
component.componentDidMount();
}
//if (component.base && component.base.parentNode) {
// component.base.parentNode.replaceChild(base, component.base);
//}
component.base = base;
base._component = component;
}
打开chrome可以看到接下来，只有text部分是重新更新的。
image.png
diff算法的核心就是同级比较，同index比较，并增加key进行优化，根据每次新的state，决定需要更新的那部分节点，实质上浏览器渲染的原理也是类似的。
最后一篇会说一下setState的优化，React中一次同步生命周期中其实setState只进行了一次，目的是减少人为的错误导致无效的渲染。
比如有人在onClick里面设置setState({count: this.state.count + 1})，之后在componentWillUpdate里面又使用一次setState({count: this.state.count + 1})，最终只会触发一次render更新。