这一篇主要来实现React的节点渲染部分。该篇需要用到介绍和准备中的内容。
Element概念
首先引出我们的第一个概念element
,它是如下形式:
{
type: 'div',
props: {
className: 'container',
children: ['hello world']
}
}
复制代码
暂时可以先把这个当做React中虚拟节点的概念,后面会有一些变化,这里先看做是虚拟节点。上节也提到过babel-plugin-transform-react-jsx 会帮助我帮将JSX转换成以下形式:
// 转换前的jsx
<div className="container">hello world</div>
// 转换后
React.createElement("div", { className: "container" }, "hello world");
复制代码
函数createElement
的第一个参数字符串标签名(此处先忽略组件的情况),第二个参数是它的所接受到的属性,从第三个参数开始,后面都是它的子节点。
createElement
理解了这些下面我们来实现我们自己的createElement
,函数参数与上面一致,返回值是一个“虚拟节点”。
function createElement(type, initProps, ...args) {
const props = Object.assign({}, initProps);
const hasChildren = args.length > 0;
// 这里不直接使用args,而使用`[].concat(...args)`是为了扁平化数组
// 将[1, [2], [3]]转为[1, 2, 3]
const rawChildren = hasChildren ? [].concat(...args) : [];
// 将children属性赋值给props
props.children = children;
return { type, props };
}
复制代码
在这个函数中,还有一种子节点是文本节点的情况,像我们上面写的那样。它跟其他节点不同,其他节点都可以通过React.createElement
函数执行后,返回一个element
。文本节点是一个字符串,为了后面能够减少if
判断,这里我们需要把字符串的形式统一为虚拟节点的形式,下面来写一个createTextElement
函数:
function createTextElement(text) {
return {
type: 'TEXT ELEMENT',
props: { nodeValue: text }
}
}
复制代码
将其类型规定为TEXT ELEMENT
的形式,同时将值放在nodeValue
里面,方便后面直接给文本节点赋值。有了createTextElement
函数,我们需要改造下我们的createElement
函数:
function createElement(type, initProps, ...args) {
const props = Object.assign({}, initProps);
const hasChildren = args.length > 0;
const rawChildren = hasChildren ? args : [];
// 过滤null、undefined和false,不做任何渲染,同时将文本节点进行转换
const children = rawChildren
.filter(child => child != null && child !== false)
.map(child => child instanceof Object ? child : createTextElement(child));
props.children = children;
return { type, props };
}
复制代码
createElement
函数到这里完成了。
render
下一步我们要开始渲染我们的节点,就像我们使用ReactDOM.render
那样,我们的渲染函数render
接收两个参数,第一个是我们要渲染的element
,第二个是我们要挂载的节点。注意后面所有的命名element
都会使用xxxElement
的形式,dom
节点都会使用xxxDom
的形式。
function render(element, parentDom) {
const { type, props } = element;
// 是文本节点则创建文本节点,这里创建一个空的文本节点,后面利用nodeValue直接给该节点赋值
const isTextNode = type === 'TEXT ELEMENT';
const childElements = props.children || [];
const childDom = isTextNode
? document.createTextNode('')
: document.createElement(type);
const isEvent = name => name.startsWith('on');
const isAttribute = name => !isEvent(name) && name !== 'children';
// 绑定事件
Object.keys(props).filter(isEvent).forEach(name => {
const eventName = name.toLowerCase().substring(2);
childDom.addEventListener(eventName, props[name]);
});
// 添加属性
Object.keys(props).filter(isAttribute).forEach(name => {
childDom[name] = props[name];
});
// 递归渲染
childElements.forEach(childElement => {
render(childElement, childDom);
});
// 挂载到父节点
parentDom.appendChild(childDom);
}
复制代码
我们首先创建了要渲染的节点。当为文本节点时,我们使用创建了一个空节点,随后在添加属性的步骤,通过childDom['nodeValue'] = name
的形式给文本节点赋值。所有onXxx
的属性都绑定为事件,其他有效属性都直接赋值给childDom
节点。然后对子节点进行递归渲染,最后挂载到父节点。整个渲染过程到这里就完成了。
我们可以使用我们实现的函数来渲染一个界面了,这是Codepen上的演示地址。我们成功渲染了界面,但是我们忽略了组件的情况,下一篇我们来实现组件和setState。
这是github原文地址。接下来我会持续更新,欢迎star,欢迎watch。
实现React系列列表: