yt88加密狗复制的方法分享，本文通过手写一个简易版 React，对 React 基本原理有一个直观的认识；
实现的版本为16.8，基于pomb.us/build-your-…；
学习前提需要有React基础；
2、实现目标
createElement；
render；
并发模式；
Fibers；
渲染和提交 ；
协调；
函数组件；
hooks；
类组件
学习建议：yt88加密狗复制，对照着文章查看，尽量动手实现一遍。
3、createElement实现
3.1 思考
在React17之前，我们写React代码的时候都会去引入React，不引入代码就会报错，而且自己的代码中没有用到React，这是为什么呢？带着这个问题我们向下学习；
import React from ‘react’
复制代码
3.2 element变量解析
我们先创建一个element变量，将本段代码放到babel上查看编译结果：
const element =
Hello
复制代码
通过babel会编译成下面这种形式：
经过编译后的代码为：
const element = React.createElement(“div”, {
title: “foo”
}, “Hello”);
复制代码
element参数说明：
dom元素
属性
children子元素
解答一下开篇提出的问题：引入React的作用，使用React进行解析JSX，如果不引入React，上面代码就会报错。JSX实际上是一个语法糖，它真正是需要解析成js代码来执行；
3.3 创建项目
我们先来创建执行命令：
npm init
复制代码
安装相关的依赖：
npm install --save-dev babel-loader @babel/core
npm install webpack --save-dev
npm install --save-dev @babel/preset-react
npm install --save-dev html-webpack-plugin
复制代码
创建项目目录：
配置webpack：
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
entry: {
main: ‘./src/index.js’
},
devServer: {
port: 9000,
},
module: {
rules: [
{
test: /.js$/,
use: {
loader: ‘babel-loader’,
options: {
presets: [’@babel/preset-env’],
plugins: [’@babel/plugin-transform-react-jsx’]
}
}
}
]
},
mode: “development”,
optimization: {
minimize: false
},
plugins: [
new HtmlWebpackPlugin({
title: ‘React’,
}),
],
}
复制代码
加入启动命令：
3.4 打印结果值
yt88加密狗复制.创建一个真实的React项目，使用create-react-app，本文就不在叙述安装过程。再来看看上文的 React.createElement 实际生成了的是什么？打印一下element：
import React from ‘react’;
import ReactDOM from ‘react-dom’;
const element =
Hello
console.log(element)
const container = document.getElementById(“root”)
ReactDOM.render(element, container)
复制代码
打印结果：
简化一下，将其他属性刨除（其他属性我们不关心）：
const element = {
type: “h1”,
props: {
title: “foo”,
children: “Hello”,
},
}
复制代码
简单总结一下，React.createElement 实际上是生成了一个 element 对象，包含两个属性对象 type 和 props ，该对象拥有以下属性：
element对象参数：
type：标签名称
props：属性
title：标签属性
children：子属性
3.5 render简单流程
提前了解一下render的简单流程：
ReactDOM.render() 将 element 添加到 id 为 root 的 DOM 节点中，我们接下来实现这个方法来代替React源码中的 ReactDOM.render()方法；
示例代码：
const element = {
type: “h1”,
props: {
title: “foo”,
children: “Hello”,
},
}
复制代码
1.首先，我们使用元素类型创建一个节点（element.type） ，在本例中是 h1；
const node = document.createElement(element.type)
复制代码
2.设置节点属性为title；
node[“title”] = element.props.title
复制代码
3.只有一个字符串作为子节点，我们创建一个文本节点，并且设置文本节点的nodeValue为element.props.children；
const text = document.createTextNode("")
text[“nodeValue”] = element.props.children
复制代码
4.最后，我们将 textNode 附加到 h1，并将 h1附加到容器；
node.appendChild(text)
container.appendChild(node)
复制代码
3.6 createElement实现（虚拟DOM）
用我们自己的代码实现React的代码；
从上文了解到createElement的作用是创建一个element对象：
const element = {
type: “h1”, //标签
props: {
title: “foo”, // 属性
children: “Hello”, // 节点
},
}
复制代码
调用方式：
const element = React.createElement(“div”, {
title: “foo”
}, “Hello”);
复制代码
根据调用和返回结果，设计createElement函数如下：
// react/createElement.js
/**
- 创建虚拟DOM结构
- @param {*} type 标签
- @param {*} props 属性
- @param {…any} children 自己诶单
- @returns 虚拟DOM结构
*/
export function createElement(type, props, …children) {
return {
type,
props: {
…props,
children: children.map(child =>
typeof child === “object”
? child
: createTextElement(child) //不是对象说明是文本节点
),
},
}
}
/**
- 当children为非对象时，创建文本节点
- @param {*} text 文本值
- @returns 虚拟DOM结构
*/
function createTextElement(text) {
return {
type: “TEXT_ELEMENT”,
props: {
nodeValue: text,
children: [],
},
}
}
复制代码
为了直观的展示，我们更改一下element结构：
const element = (
const element = (
bar )console.log(element