创建虚拟DOM与Babel转换原理
虚拟DOM的创建过程
-
jsx代码
复制代码1
2let element = <h1 className="title" style={{background:'red'}}>123</h1>
-
Babel转换为js方法
复制代码1
2
3
4
5
6
7
8
9
10
11// 转换前的代码 // let element = <h1 className="title" style={{background:'red'}}>123</h1> // 转化后的代码 React.createElement("h1", { className: "title", style: { background: 'red' } }, "123");
-
由
React.createElement
方法创建虚拟DOM
React.createElement方法
我们通过以上代码,可以看出React.createElement
方法的使用
复制代码
1
2React.createElement(component, props, ...children)
参数 | 描述 | 类型 |
---|---|---|
component | 标签名 | String |
props | 配置或传入的参数,style 等 | Object|null |
children | 子组件 | String|Array|null |
复制代码
1
2
3
4
5
6
7React.createElement("h1", { className: "title", style: { background: 'red' } }, React.createElement('span',null,'666'),React.createElement('span',null,'6663'));
最后形成的DOM
复制代码
1
2
3
4
5<h1> <span>666</span> <span>6663</span> </h1>
手写React.createElement
stants.js
复制代码
1
2
3
4
5
6
7
8/** * 标识元素 还是 文本 */ export const REACT_ELEMENT = Symbol("react.element") export const REACT_TEXT = Symbol("react.TEXT")
util.js
复制代码
1
2
3
4
5
6
7
8
9import { REACT_TEXT } from "./stants"; export function toObject(element){ return typeof element === 'string' || typeof element === 'number' ? { type:REACT_TEXT,content:element } : element }
react.js
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52import { toObject } from "./util" const createElement = function(type,config,children){ let key let ref let props = {...config} if(config){ // 处理key,ref /** * 按照babel的转化规则,<h1 key={1} ref={2}>123</h1>,ref和key数据会被置于config中 * 目的:提取ref和key,删除props中的属性 */ key = config.key ref = config.ref delete props.key delete props.ref // 处理children /** * arguments对象是所有(非箭头)函数中都可用的局部变量 * arguments对象不是一个 Array ,它类似于Array,但除了 length 属性和索引元素之外没有任何Array属性。 */ // 如果参数大于3,即有多个子组件 if(arguments.length > 3) { /** * 对参数使用 slice 会阻止某些 JavaScript 引擎中的优化 (比如 V8 - 更多信息) * 如果你关心性能,尝试通过遍历 arguments 对象来构造一个新的数组 * 另一种方法是使用被忽视的Array构造函数作为一个函数 * MDN: * var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments)); */ /** * children优化: * 文本children:返回children(字符串) * 元素children:返回对象类型,createElement的返回值 */ props.children = Array.prototype.slice.call(arguments,2).map(value => toObject(value)) }else if(arguments === 3){ // 只有一个组件 props.children = toObject(children) } } return { $$typeof:REACT_ELEMENT, // 使用createElement创建的必然是一个元素类型 type, // 类型,如div、span key, // 用于做diff算法 ref, // 用于获取真实DOM props } }
最后
以上就是无奈大地最近收集整理的关于React 创建虚拟DOM与Babel转换原理创建虚拟DOM与Babel转换原理的全部内容,更多相关React内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复