我是靠谱客的博主 无奈大地,这篇文章主要介绍React 创建虚拟DOM与Babel转换原理创建虚拟DOM与Babel转换原理,现在分享给大家,希望可以做个参考。

创建虚拟DOM与Babel转换原理

虚拟DOM的创建过程

  1. jsx代码

    复制代码
    1
    2
    let element = <h1 className="title" style={{background:'red'}}>123</h1>
  2. 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");
  3. React.createElement方法创建虚拟DOM

React.createElement方法

我们通过以上代码,可以看出React.createElement方法的使用

复制代码
1
2
React.createElement(component, props, ...children)
参数描述类型
component标签名String
props配置或传入的参数,styleObject|null
children子组件String|Array|null
复制代码
1
2
3
4
5
6
7
React.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
9
import { 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
52
import { 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内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(89)

评论列表共有 0 条评论

立即
投稿
返回
顶部