侧边栏

Preact源码分析

发布于 | 分类于 源码分析/Preact

最近打算学习React源码，发现了一个简易版的框架Preact，且与React的API比较相似，因此决定先看看它的代码。

本文使用源码版本preact 10.0.0-beta.3，复制了部分核心源码，删除了一些逻辑分支并增加了注释。

开发环境 ​

克隆整个项目，安装依赖，然后进行断点调试

bash
git clone [email protected]:preactjs/preact.git
# 安装项目依赖
cd preact
npm i

# 进入demo项目，安装webpack、babel等相关依赖
cd demo 
npm i

# 启动demo项目，开始进行断点调试
npm run start

修改demo/index.js中的代码，构建一个最基本的应用

js
import { createElement, render, Component } from 'preact';
class Home extends Component {
	constructor(props) {
		super(props);
		this.state = {
			count: 1
		};
	}
	render() {
		let { count } = this.state;
		let { msg } = this.props;
		return (
			<div>
				<h1>{msg}</h1>
				<p>count:{count}</p>
			</div>
		);
	}
}
let vnode = (
	<Home msg="hello msg"/>
);
console.log(vnode);

let app = document.createElement('div');
document.body.appendChild(app);

render(vnode, app);

我们构建了一个叫Home的组件，然后将它挂载到一个DOM节点上上，从上面代码可以看出，我们首先需要了解Component类和render函数

渲染流程 ​

Component ​

下面是Component类的源码，

js
// src/component.js
export function Component(props, context) {
	this.props = props;
	this.context = context;
}
Component.prototype.setState = function(update, callback) {}
Component.prototype.forceUpdate = function(callback) {}
Component.prototype.render = Fragment

// src/create-element.js
export function Fragment(props) {
	return props.children;
}

可以把Component看做是一个类，我们暂时不需要关心其方法的作用和实现。

vnode ​

再回过头来看看<Home />到底是啥东西

js
// demo/index.js
let vnode = (
	<Home msg="hello msg"/>
);
// 被babel转化成下面代码，chrome调试模式->network面板->main.js中可查看babel编译后的代码
var vnode = Object(preact__WEBPACK_IMPORTED_MODULE_0__["createElement"])(Home, {
    msg: "hello msg"
});
// 打印vnode, 控制台输出下面内容，可见标签上的属性转换成了props
{"props":{"msg":"hello msg"},"_children":null,"_parent":null,"_depth":0,"_dom":null,"_lastDomChild":null,"_component":null}

babel编译JSX，将其转换成createElement方法调用，这也是为什么demo/index.js文件头部需要手动引入一个createElement方法的原因，查看createElement相关源码

js
// src/create-element.js
export function createElement(type, props, children) {
	props = assign({}, props);

	if (arguments.length>3) {
        // children后传入多个参数时转换为数组
        // ...
	}
	if (type!=null && type.defaultProps!=null) {
        // 处理type.defaultProps，并将其合并到props上
        // ...
	}
    // 处理key和ref
	let ref = props.ref;
	let key = props.key;
	if (ref!=null) delete props.ref;
	if (key!=null) delete props.key;
    // 调用createVNode，因此createElement 返回的是一个vnode
	return createVNode(type, props, key, ref);
}

注意props和children参数都是有babel编译JSX时，通过解析模板替我们传入的参数。顺藤摸瓜，我们来看看createNode

js
// src/create-element.js
export function createVNode(type, props, key, ref) {
    // 已经把vnode简化成一个对象字面量了，可以看到这跟上面打印的<Home />基本一致
	const vnode = {
		type,
		props,
		key,
		ref,
		_children: null,
		_parent: null,
		_depth: 0,
		_dom: null,
		_lastDomChild: null,
		_component: null,
		constructor: undefined
	};

	return vnode;
}

render ​

现在我们知道了<Home />实际上就是一个vnode，接下来再看看render(<Home />, document.body)中的逻辑

js
// src/render.js
export function render(vnode, parentDom, replaceNode) {
	if (options._root) options._root(vnode, parentDom);
	let oldVNode = parentDom._children;
	vnode = createElement(Fragment, null, [vnode]); // 使用Fragment包裹了实际的vnode

	let mounts = [];
	diff(
		parentDom, // document.body
		replaceNode ? vnode : (parentDom._children = vnode), // parentDom._children = vnode
		oldVNode || EMPTY_OBJ, // {}
		EMPTY_OBJ, // {}
		parentDom.ownerSVGElement !== undefined, // false
		replaceNode
			? [replaceNode]
			: oldVNode
				? null
				: EMPTY_ARR.slice.call(parentDom.childNodes), // document.body所有DOM子节点
		mounts, // []
		false,
		replaceNode || EMPTY_OBJ, // {}
	);
	commitRoot(mounts, vnode);
}

通过断点发现,在diff方法结束之后页面进行了渲染，那么在该方法内，肯定实现了从vnode到实际DOM节点的转变。至此，整个渲染流程分析基本完毕。

小结 ​

大致流程如下

  • 创建了一个组件类Home，然后构造了一个vnode，最后调用render方法将该vnode挂载到了页面DOM节点上
  • 在render函数内部，调用了diff方法，将递归遍历以该vnode构造的AST，并将所有vnode转换成DOM节点，完成页面渲染

preact把渲染相关的操作一并放在了diff代码中，因此看起来涉及到的流程还是比较多的。初始化时可以当做新vnode与旧的空节点做比较，因此第一次渲染也使用与页面更新时相同的diff逻辑来完成渲染。

那么，diff方法内部的流程到底是如何实现的呢？

diff三部曲 ​

该函数有点长，我们现在暂时只需要关注初始化时页面的渲染流程，因此下面源码删除了与初始化无关的条件分支。记住，我们现在把初识化的过程当做一个全新的vnode与空节点之间的对比。

js
// src/diff/index.js
/*
parentDom: 父DOM节点
newVNode: 新的AST根节点
oldVNode: 旧的AST根节点
context: 当前context
isSvg: 是否是svg节点
excessDomChildren: 父节点下其余的DOM节点
mounts: 一个表示需要触发挂载成功的组件列表，从根节点一直透传到所有叶子节点，并收集所有需要出发的节点
force: 是否强制更新
oldDom: 当前DOM节点
*/
export function diff(parentDom, newVNode, oldVNode, context, isSvg, excessDomChildren, mounts, force, oldDom) {
	let tmp, newType = newVNode.type;

	try {
		outer: if (typeof newType==='function') {
      // 根据oldVNode是否存在判断是更新还是新增节点，初始化相关数组和组件实例
			let c, isNew, oldProps, oldState, snapshot, clearProcessingException;
			let newProps = newVNode.props;
			let cctx =  context;
			// 如果是一个注册的Component组件，则调用构造函数获取组件实例，因此Home组件就是在此处实例化的
      if (newType.prototype && newType.prototype.render) {
        // vnode通过_component维持了对于组件实例的引用，因此可以newVNode._component.setState()等方式调用组件方法
        newVNode._component = c = new newType(newProps, cctx); // eslint-disable-line new-cap
      }else {
        // 根节点由Fragment组件包裹，无render方法，因此直接调用Component
        newVNode._component = c = new Component(newProps, cctx);
        c.constructor = newType;
        c.render = doRender; //  (props, state, context) => this.constructor(props, context)
      }

      c.props = newProps;
      if (!c.state) c.state = {}; // 设置组件默认的state
      c.context = cctx;
      c._context = context;
      isNew = c._dirty = true;
      c._renderCallbacks = [];

			if (c._nextState==null) {
				c._nextState = c.state;
			}
      // 调用组件的getDerivedStateFromProps生命周期，该钩子函数是组件的一个静态方法
      if (newType.getDerivedStateFromProps!=null) {
				assign(c._nextState==c.state ? (c._nextState = assign({}, c._nextState)) : c._nextState, newType.getDerivedStateFromProps(newProps, c._nextState));
			}
      // 调用componentWillMount声明周期函数，可见父组件的componentWillMount先于子组件调用
      // 将注册了componentDidMount声明周期函数的组件放在mounts数组中，等待所有子节点都挂载完毕后在render的commitRoot方法中统一调用
			if (isNew) {
				if (newType.getDerivedStateFromProps==null && c.componentWillMount!=null) c.componentWillMount();
				if (c.componentDidMount!=null) mounts.push(c);
			}

			oldProps = c.props;
			oldState = c.state;

			c.context = cctx;
			c.props = newProps;
      // 设置_nextState的初始值为state
      if (c._nextState==null) {
				c._nextState = c.state;
			}

			c._dirty = false;
			c._vnode = newVNode;
			c._parentDom = parentDom;

      tmp = c.render(c.props, c.state, c.context); // 调用组件render方法

      // 将tmp子节点转换为一个一维数组, 并存放在newVNode._children中
      // 其中coerceToVNode接收一个vnode作为参数，如果vnode已经有了_dom属性，则返回一个克隆后的vnode；否则返回当前vnode
      toChildArray(tmp, newVNode._children=[], coerceToVNode, true); 

      // 开始对比子节点，其内部递归调用了diff方法，通过diffElementNodes获取子节点的真实dom
      // 然后调用parentDom.appendChild(newDom)或parentDom.insertBefore(newDom, oldDom)，将dom插入页面
			diffChildren(parentDom, newVNode, oldVNode, context, isSvg, excessDomChildren, mounts, oldDom);

			c.base = newVNode._dom;
			while (tmp=c._renderCallbacks.pop()) tmp.call(c);
		}else {
      // 一个封装组件的最底层都是用html标签构造的，当newType不是Component时，表示渲染的是元素DOM，其内部调用了document.createElement方法渲染真正的dom
			newVNode._dom = diffElementNodes(oldVNode._dom, newVNode, oldVNode, context, isSvg, excessDomChildren, mounts);
		}
	}catch (e) {
		catchErrorInComponent(e, newVNode._parent);
	}

	return newVNode._dom;
}

可见在diff中调用了diffChildren方法来比较两个vNode的所有子节点的差异，让我们紧随其后，一探究竟

js
// src/diff/children.js
export function diffChildren(parentDom, newParentVNode, oldParentVNode, context, isSvg, excessDomChildren, mounts, oldDom) {
    let childVNode, i, j, oldVNode, newDom, sibDom, firstChildDom, refs;
    // 在上一层的diff方法中已经调用了toChildArray将其组件的render函数返回值转换成了_children属性，
    // 如果render函数未返回数据，则再次调用toChildArray将其props.children属性转换成_children属性
    // 这就是为什么在无render函数的时候还可以染组件内标签的原因
    let newChildren =newParentVNode._children || toChildArray(newParentVNode.props.children, newParentVNode._children=[], coerceToVNode, true); 
    // 获取旧的子节点列表
    let oldChildren = (oldParentVNode && oldParentVNode._children) || EMPTY_ARR;
    for (i=0; i<newChildren.length; i++) {
        // 如果vnode已被使用且关联了一个_dom元素，则克隆出一个新的vnode
        childVNode = newChildren[i] = coerceToVNode(newChildren[i]);
        // 跳过为null的子节点
        if (childVNode!=null) {
            childVNode._parent = newParentVNode;
            childVNode._depth = newParentVNode._depth + 1;

            oldVNode = oldChildren[i];
            // 处理oldChildren[i]，如果存在某些未与childVNode做比较的子节点，则再后面会调用unmount进行移除
            if (oldVNode===null || (oldVNode && childVNode.key == oldVNode.key && childVNode.type === oldVNode.type)) {
				oldChildren[i] = undefined;
			}else {
				for (j=0; j<oldChildrenLength; j++) {
					oldVNode = oldChildren[j];
					if (oldVNode && childVNode.key == oldVNode.key && childVNode.type === oldVNode.type) {
						oldChildren[j] = undefined;
						break;
					}
					oldVNode = null;
				}
			}
      oldVNode = oldVNode || EMPTY_OBJ;

      // 开始比较每个子节点的区别，递归调用diff方法内的diffChildren方法，
      // 此时我们将跳转会diff方法，并最终跳转到diffElementNodes方法，获取到一个真实的dom节点，因此这里先阅读下面的 diffElementNodes 源码部分
      newDom = diff(parentDom, childVNode, oldVNode, context, isSvg, excessDomChildren, mounts, null, oldDom);

      // 阅读完diffElementNodes源码，我们知道了diff方法返回的是一个oldVNode._dom经过初始化、diffChildren和diffProps后的DOM节点
      // 此时 newVNode._dom = newDom
          if (newDom!=null) {
                if (firstChildDom == null) {
                    firstChildDom = newDom;
                }
                if (childVNode._lastDomChild != null) {
                    // 我们知道一个组件只能包含一个最外层的子节点，
                    // 如果childVNode.type是一个组件，那么将childVNode保存的_lastDomChild属性赋值给newDom，无需进行下面分支的判断比较
                    newDom = childVNode._lastDomChild;
                    childVNode._lastDomChild = null;
                }else if (excessDomChildren==oldVNode || newDom!=oldDom || newDom.parentNode==null) {
                    outer: if (oldDom==null || oldDom.parentNode!==parentDom) {
                        // 如果父节点都已经修改，则直接向新的parentDom中追加newDom即可
                        parentDom.appendChild(newDom);
                    }
                    else {
                        // 如果父节点相同，则判断newDom是否已经存在parentDom中，不存在则调用insertBefore插入newDom
                        // todo 这里为什么调用的是insertBefore
                        // `j<oldChildrenLength; j+=2` is an alternative to `j++<oldChildrenLength/2`
                        for (sibDom=oldDom, j=0; (sibDom=sibDom.nextSibling) && j<oldChildrenLength; j+=2) {
                            if (sibDom==newDom) {
                                break outer;
                            }
                        }
                        parentDom.insertBefore(newDom, oldDom);
                    }
                }

                oldDom = newDom.nextSibling;
                // 如果childVNode.type是一个组件，保存newDom到其_lastDomChild属性
                if (typeof newParentVNode.type == 'function') {
                    newParentVNode._lastDomChild = newDom;
                }
            }
        }
    }
    newParentVNode._dom = firstChildDom;
    // 如果还存在未被设置为undefined的旧节点，如oldChildrenLength > newChildren.length 的情况，则需要移除旧节点
	for (i=oldChildrenLength; i--; ) if (oldChildren[i]!=null) unmount(oldChildren[i], newParentVNode);
}

接下来看看diffElementNodes是何方神圣

js
// src/diff/index.js
function diffElementNodes(dom, newVNode, oldVNode, context, isSvg, excessDomChildren, mounts) {
	let i;
	let oldProps = oldVNode.props;
	let newProps = newVNode.props;

	isSvg = newVNode.type==='svg' || isSvg;
    // 在diff方法中传入的是oldVNode._dom，第一次调用时会初始化，生成真实的dom节点
	if (dom==null) {
        // 无type类型，返回纯文本节点
		if (newVNode.type===null) {
			return document.createTextNode(newProps);
		}
        // 有类型，如div、h1、p标签等，则返回实际dom节点
		dom = isSvg ? document.createElementNS('http://www.w3.org/2000/svg', newVNode.type) : document.createElement(newVNode.type);
	}
    // 如果节点未发生变化，则可以以该节点为根的子AST未发生变化，即所有子节点均无变化，diff到此为止
    // 只有当新节点发生变化时，才进行该条件判断的逻辑，其内部会继续调用diffChildren判断相关子节点
	if (newVNode!==oldVNode) {
		oldProps = oldVNode.props || EMPTY_OBJ;

        // 替换dom节点html内容为dangerouslySetInnerHTML属性传递的内容
		let oldHtml = oldProps.dangerouslySetInnerHTML;
		let newHtml = newProps.dangerouslySetInnerHTML;
		if ((newHtml || oldHtml) && excessDomChildren==null) {
			// Avoid re-applying the same '__html' if it did not changed between re-render
			if (!newHtml || !oldHtml || newHtml.__html!=oldHtml.__html) {
				dom.innerHTML = newHtml && newHtml.__html || '';
			}
		}
        // 处理multiple属性
		if (newProps.multiple) {
			dom.multiple = newProps.multiple;
		}
        // 将dom作为parentDom，并开始对比newVNode和oldVNode的子节点列表
		diffChildren(dom, newVNode, oldVNode, context, newVNode.type==='foreignObject' ? false : isSvg, excessDomChildren, mounts, EMPTY_OBJ);
        
        // 将新旧属性的变化复制到新的dom节点上，如style、value、checked等属性
		diffProps(dom, newProps, oldProps, isSvg);
	}
    // 返回新的dom节点，此时跳回diffChildren调用diff方法的地方，调用diff方法得到的就是这个dom节点
	return dom;
}

diff方法需要结合diffChildren和diffElementNodes这两个方法一起阅读，他们内部互相嵌套调用，直至遍历完整个vnode组成的AST。

  • 首先调用diff，根据newType的类型判断调用diffChildren还是diffElementNodes，
  • 在diffChildren中，获取新旧节点的子节点列表，依次递归调用diff方法；
  • 在diffElementNodes，通过判断newVNode和oldVNode是否相同，如果不相同，则递归调用diffChildren，如果相同，则表示无变化，递归出栈。

在render函数中调用diff方法进行初始化时，oldVnode为空，oldVnode._dom也为null，因此就会进入上面相关代码的初始化化流程。

我们知道diff主要是用来比较新旧两个VNode树，用于减少真实DOM操作的性能消耗，在状态更新引起的页面重新渲染时，我们需要继续关注diff函数的其他工作，在此之前，我们只需要关注vnode是如何转换成DOM即可。

setState ​

在diff代码中可以看见，初始化时，vnode通过vnode._component属性维持了组件实例的引用。而在调用setState更新状态之后，页面会重新渲染组件，接下来让我们看看状态更新时发生了什么。

渲染流程 ​

修改demo内的代码

js
// demo/index.js
setTimeout(() => {
	vnode._component.setState({
		count: 2
	});
}, 1000);

经过1s的延迟之后，会重新渲染文本内容为count:2，现在我们从_component.setState入手，看看调用setState之后的执行流程

js
// src/component.js
Component.prototype.setState = function(update, callback) {
    // 在diff中初始化时，将_nextState初始化为state，需要注意assign返回的是它的第一个参数
	let s = (this._nextState!==this.state && this._nextState) || (this._nextState = assign({}, this.state));
	if (typeof update!=='function' || (update = update(s, this.props))) {
        // 合并this._nextState和需要更新的数据update，update上的属性会覆盖this._nextState的值
        // 注意此处并不会修改当前this.state的值，setState()方法是异步的！！
		assign(s, update);
	}
	if (update==null) return;
	if (this._vnode) {
        // 收集更新后的回调，在渲染完成之后将执行该回调
		if (callback) this._renderCallbacks.push(callback);
		enqueueRender(this); // 将此次更新入队列
	}
};

然后我们来看看这个渲染队列enqueueRender的实现

js
let q = [];
const defer = typeof Promise=='function' ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout;

export function enqueueRender(c) {
	if (!c._dirty && (c._dirty = true) && q.push(c) === 1) {
		(options.debounceRendering || defer)(process); // 异步执行process，这里可以说明setState方法是异步的
	}
}
function process() {
	let p;
    // 将节点按深度进行排序，深度越大，排位越靠前，可见子组件先触发forceUpdate
	q.sort((a, b) => b._vnode._depth - a._vnode._depth);
    // 逐步调用forceUpdate，最后清空q
	while ((p=q.pop())) {
		// forceUpdate's callback argument is reused here to indicate a non-forced update.
		if (p._dirty) p.forceUpdate(false);
	}
}

从上面的代码我们知道了setState方法是异步的原因，可知调用setState之后，preact会把组件更新后的数据放在_nextState上，然后将该组件放入渲染队列中，等待所有的setState调用完毕，浏览器进入异步事件队列时，根据组件对应vnode的深度进行排序，依次调用组件的forceUpdate方法，接下来看看forceUpdate这个方法

js
// src/component.js
Component.prototype.forceUpdate = function(callback) {
	let vnode = this._vnode, oldDom = this._vnode._dom, parentDom = this._parentDom;
	if (parentDom) {
		const force = callback!==false;

		let mounts = [];
        // 调用diff方法，重新渲染页面
		let newDom = diff(parentDom, vnode, assign({}, vnode), this._context, parentDom.ownerSVGElement!==undefined, null, mounts, force, oldDom == null ? getDomSibling(vnode) : oldDom);

		commitRoot(mounts, vnode);

		if (newDom != oldDom) {
			updateParentDomPointers(vnode);
		}
	}
	if (callback) callback();
};

diff ​

可以发现，在forceUpdate中，调用的仍旧是diff方法，通过对比新的节点vnode和旧的节点assign({}, vnode)重新渲染页面，因此我们现在需要回到diff方法，查看当更新节点state时是如何重新渲染的。同样地，为了简化流程，移除了大部分与setState相关流程无关的代码。

js
export function diff(parentDom, newVNode, oldVNode, context, isSvg, excessDomChildren, mounts, force, oldDom) {
	let tmp, newType = newVNode.type;

	try {
		outer: if (typeof newType==='function') {
			let c, isNew, oldProps, oldState, snapshot, clearProcessingException;
			let newProps = newVNode.props;
			let cctx =  context;

            // 之前已经调用过组件构造函数，因此此处直接赋值
			if (oldVNode._component) {
				c = newVNode._component = oldVNode._component;
				clearProcessingException = c._processingException = c._pendingError;
			}
            // 调用相关声明周期函数
            if (newType.getDerivedStateFromProps!=null) {
				assign(c._nextState==c.state ? (c._nextState = assign({}, c._nextState)) : c._nextState, newType.getDerivedStateFromProps(newProps, c._nextState));
			}
            if (newType.getDerivedStateFromProps==null && force==null && c.componentWillReceiveProps!=null) {
                c.componentWillReceiveProps(newProps, cctx);
            }
            // 如果组件的shouldComponentUpdate方法返回false，则不更新组件，跳出最外层outer处的if循环
            if (!force && c.shouldComponentUpdate!=null && c.shouldComponentUpdate(newProps, c._nextState, cctx)===false) {
                c.props = newProps;
                c.state = c._nextState;
                c._dirty = false;
                c._vnode = newVNode;
                newVNode._dom = oldVNode._dom;
                newVNode._children = oldVNode._children;
                break outer;
            }
            if (c.componentWillUpdate!=null) {
                c.componentWillUpdate(newProps, c._nextState, cctx);
            }
            
            // 获取新旧节点的props和state
			oldProps = c.props;
			oldState = c.state;

			c.context = cctx;
			c.props = newProps; // 设置新的props
			c.state = c._nextState; // 此时才开始将组件的state设置为调用setState方法传入的新值，牢记setState方法是异步的!!

			c._dirty = false;
			c._vnode = newVNode;
			c._parentDom = parentDom;

			try {
				tmp = c.render(c.props, c.state, c.context); // 重新调用render函数，生成新的vnode，新的vnode会渲染新的dom节点
				toChildArray(tmp, newVNode._children=[], coerceToVNode, true);
			}catch (e) {
				if ((tmp = options._catchRender) && tmp(e, newVNode, oldVNode)) break outer;
				throw e;
			}
            // 调用getSnapshotBeforeUpdate生命周期函数
			if (!isNew && c.getSnapshotBeforeUpdate!=null) {
				snapshot = c.getSnapshotBeforeUpdate(oldProps, oldState);
			}

            // 开始对比子节点，在内部修改newVNode._dom实际DOM节点并挂载到parentDom上，这里与上面在初识化渲染时候分析基本一致
            // 递归diffChildren、diff和diffElementNodes，获取新的newVNode._dom
			diffChildren(parentDom, newVNode, oldVNode, context, isSvg, excessDomChildren, mounts, oldDom);

			c.base = newVNode._dom;
            // 此时渲染完毕，开始执行setState时传入的回调函数
			while (tmp=c._renderCallbacks.pop()) tmp.call(c);

            // 调用componentDidUpdate生命周期函数
			if (!isNew && oldProps!=null && c.componentDidUpdate!=null) {
				c.componentDidUpdate(oldProps, oldState, snapshot);
			}
		}
		else {
			newVNode._dom = diffElementNodes(oldVNode._dom, newVNode, oldVNode, context, isSvg, excessDomChildren, mounts);
		}
	}
	catch (e) {
		catchErrorInComponent(e, newVNode._parent);
	}

	return newVNode._dom;
}

剩下的diffChildren方法与diffElementNodes在上面render流程中已基本理清，这里不再赘述。

小结 ​

总结一下上面的执行流程

  • 首先调用setState，其内部把需要更新的属性挂载到c._nextState属性上，然后将组件放入enqueueRender队列中
  • 当浏览器进行异步事件循环阶段时，会调用根据enqueueRender中每个组件的深度，从大到小依次调用组件的forceUpdate方法
  • 在组件的forceUpdate中，会调用diff方法重新渲染c._vnode._domDOM节点
    • 在diff方法中，会将c._nextState赋值给c.state，然后重新调用c.render方法，获取新的vnode节点，并通过toChildArray将新的vnode.children赋值为newVNode._children
    • 在diffChildren中，会依次比较newVNode._children和oldVNode._children所有子节点，如果节点不相同，则返回新的DOM节点；最后删除多余的旧节点
    • 将更新后的DOM节点挂载到parentDom上，并移除多余的旧DOM节点，完成页面渲染的更新

props ​

我们知道，babel会把JSX中标签上的属性转换成props属性，然后传入createElement函数，在上面的diffElementNodes中我们知道，当vnode节点发生改变时，会递归调用diffChildren比较子节点，此外，还会调用diffProps更新当前DOM节点的属性

js
// src/diff/index.js
function diffElementNodes(dom, newVNode, oldVNode, ...) {
	if (newVNode!==oldVNode) {
		diffChildren(dom, newVNode, oldVNode, ...);
		diffProps(dom, newProps, oldProps, isSvg);
	}
}

前面我们只关注了diffChildren，接下来我们看看props是如何传递给子组件的，下面是diffProps的源码

js
export function diffProps(dom, newProps, oldProps, isSvg) {
	let i;

	const keys = Object.keys(newProps).sort();
	for (i = 0; i < keys.length; i++) {
		const k = keys[i];
		// 跳过一些特殊的属性名
		if (k!=='children' && k!=='key' && (!oldProps || ((k==='value' || k==='checked') ? dom : oldProps)[k]!==newProps[k])) {
			setProperty(dom, k, newProps[k], oldProps[k], isSvg);
		}
	}

	for (i in oldProps) {
		if (i!=='children' && i!=='key' && !(i in newProps)) {
			setProperty(dom, i, null, oldProps[i], isSvg);
		}
	}
}

可见其内部是通过setProperty更新DOM属性的，针对于属性，我们需要着重关注一下DOM事件是如何绑定的

js
// src/diff/props.js
function setProperty(dom, name, value, oldValue, isSvg) {
	name = isSvg ? (name==='className' ? 'class' : name) : (name==='class' ? 'className' : name);
	if (name==='style') {
		// 修改样式...
	}
	// Benchmark for comparison: https://esbench.com/bench/574c954bdb965b9a00965ac6
	else if (name[0]==='o' && name[1]==='n') {
		// 处理onClick等事件
		let useCapture = name !== (name=name.replace(/Capture$/, ''));
		let nameLower = name.toLowerCase();
		name = (nameLower in dom ? nameLower : name).slice(2);

		// 注册事件函数
		if (value) {
			if (!oldValue) dom.addEventListener(name, eventProxy, useCapture);
			(dom._listeners || (dom._listeners = {}))[name] = value;
		}
		else {
			dom.removeEventListener(name, eventProxy, useCapture);
		}
	}
	else if (name!=='list' && name!=='tagName' && !isSvg && (name in dom)) {
		// ...特殊处理select和options
	}
	else if (typeof value!=='function' && name!=='dangerouslySetInnerHTML') {
		// 调用setAttribute和removeAttribute...
	}
}

在组件更新时，如果相关的vnode上props属性发生了变化，则会进入diffProps的操作，DOM节点的属性就会随之更新。

小结 ​

本文从一段简易的demo代码触发，分析了preact几段比较核心的代码，包括

  • Component组件系统，包括组件的初始化，生命周期以及render函数的调用时机
  • createElement方法，以及vnode的作用，可见在diff操作中，基本的思路是比较新旧两个vnode
  • setState方法调用时，将组件放在队列中并调用forceUpdate来触发页面的更新
  • diff操作的流程，包括diff、diffChildren、diffElementNodes和diffProps几个方法，了解页面是如何从vnode组成的AST转换成一颗真实的DOM树，可以看见diff过程中对于vnode._dom的复用
  • 分析了props系统以及事件注册，preact的事件是注册在对应的单个DOM节点上的，貌似存在事件委托的逻辑

整体来说，Preact还是比较简单的，通过阅读源码，我们可以大致了解React的实现原理，接下来可以去了解一下preact-router和preact-redux，这样对于学习React来说应该是有一定帮助的。最后，就应该去试试阅读React的源码了，毕竟只是当一个API使用者是远远不够的。

#Preact #React #源码分析

你要请我喝一杯奶茶？

版权声明：自由转载-非商用-保持署名和原文链接。

本站文章均为本人原创，参考文章我都会在文中进行声明，也请您转载时附上署名。