React的createElement和render手写实现示例.docx

第

React的createElement和render手写实现示例

目录TL;DR科普概念准备工作实现createElement实现render测试

TL;DR

本文的目标是，手写实现createElement和render

React.createElement实现的本质就是整合参数变成对象，这个对象就是react元素ReactDOM.render实现的本质就是根据react元素（对象）创建真实元素及其属性和子元素

科普概念

JSX语法-就是类似html的写法h1颜酱span最酷/span/h1JSX语法本质-JSX本质是语法糖，实际会被babel编译成React.createElementreact元素-并不是真实DOM，实际是React.createElement函数返回的对象，结构大约如下，核心属性就是type、props、props.children

reactElement={

type:div,

props:{

className:title,

style:{color:#f69},

children:world,

准备工作

先创建一个react项目：

create-react-appreact-source

安装cross-env和修改命令，兼容React旧写法

yarnaddcross-env

修改package.json的命令：

scripts:{

start:cross-envDISABLE_NEW_JSX_TRANSFORM=truereact-scriptsstart,

build:cross-envDISABLE_NEW_JSX_TRANSFORM=truereact-scriptsbuild

删除src里面所有内容，然后新建index.js

importReactfromreact;

importReactDOMfromreact-dom;

constreactElement_text=onlytext;

constreactElement_oneNode=(

divclassName=title#f69}}

onenode

/div

constreactElement_oneChildNode=(

div

spanonechildnode/span

/div

constreactElement_multipleNode=(

div

spanfirstchild/span

textchild

/div

//onlytext

console.log(reactElement_text);

//{type:div,props:{className:title,style:{color:#f69},children:onenode},};

console.log(reactElement_oneNode);

//{type:div,props:{children:{type:span,props:{children:onechildnode},},},};

console.log(reactElement_oneChildNode);

//{type:div,props:{children:[{type:span,props:{children:firstchildnode}},text,],},};

console.log(reactElement_multipleNode);

ReactDOM.render(reactElement_multipleNode,document.getElementById(root));

留心看，props.children的结构，有三种类型：字符串、对象、数组。

npmstart

(^▽^)，就可以看到http://localhost:3000/了！

实现createElement

JSX语法相当于React.createElement，那么先实现createElement。

先看看怎么相当，在线访问：

分析参数-输入

第一个参数，始终是最外层元素名第二个参数，始终是最外层的元素属性集合或null第三个参数及以后的参数，始终是子