React Mini版实现(1)

图：Vivivian

准备

JSX

React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

表面上像 HTML，本质上还是通过 babel 转换为 js 执行。jsx 就是一段 js，只是写成了 html 的样子，而我们读取他的时候，jsx 会自动转换成 vnode 对象给我们，这里都由 react-script 的内置的 babel 帮助我们完成。

1return <div>Hello Word</div>;
2
3//实际上是：
4
5return React.createElement("div", null, "Hello");

JSX 本质上就是转换为 React.createElement 在 React 内部构建虚拟 Dom，最终渲染出页面。

虚拟 Dom

先看一个最简单的 react 组件渲染

1import React from 'react'
2import ReactDOM from 'react-dom'
3function App(props){
4     return <div>你好</div>
5 </div>
6}
7ReactDOM.render(<App/>,  document.getElementById('root'))

在上述的 js 文件中，我们使用了 jsx。但是 jsx 的编译是需要 react 的，所以不引用 react 就会报错。 react 的作用，就是把 jsx 转换为虚拟dom对象。

JSX 本质上就是转换为React.createElement在 React 内部构建虚拟 Dom，最终渲染出页面。

React 负责逻辑控制，数据 -> VDOM
ReactDom 渲染实际 DOM，VDOM -> DOM

React 将 jsx 转换为“虚拟 dom”对象。我们再利用 ReactDom 的虚拟 dom 通过 render 函数，转换成 dom。再通过插入到我们的真是页面中。

实现

下面我们来看下实现

react 的功能化问题，暂时不考虑。例如，启动 react，怎么去识别 JSX，实现热更新服务等等，我们的重点在于 react 自身。我们借用一下一下 react-scripts 插件。

初始化项目

新建 package.json

1{
2  "name": "react_mini",
3  "scripts": {
4    "start": "react-scripts start"
5  },
6  "version": "0.1.0",
7  "private": true,
8  "dependencies": {
9    "react-scripts": "3.4.1"
10  }
11}

1npm i

新建 public/index.js, src/index.js, src/react.js, src/react.dom.js

最终目录结构如下

1.
2├── package.json
3├── public
4│   └── index.html
5└── src
6    ├── index.js
7    ├── react-dom.js
8    └── react.js

index.html

react-scripts 会起一个 server 加载这个 html

1<!DOCTYPE html>
2<html lang="en">
3  <head> </head>
4  <body>
5    <div id="root"></div>
6  </body>
7</html>

index.js

react-scripts 会以这个文件为入口加载 js 这个文件写一些我们的测试代码

1import ReactDOM from "./react-dom";
2import React from "./react.js";
3
4// 类组件示例
5class MyClassCmp extends React.Component {
6  constructor(props) {
7    super(props);
8  }
9  render() {
10    return <div className="class_2">这是{this.props.name}</div>;
11  }
12}
13
14//函数组件示例
15function MyFuncCmp(props) {
16  return <div className="class_1">这是{props.name}</div>;
17}
18
19const hello = () => {
20  alert("Hello Mini React");
21};
22
23let jsx = (
24  <div>
25    <h1>Mini React</h1>
26    <div className="className1" onClick={hello}>
27      <div>This is my Mini React</div>
28      <MyFuncCmp name="函数组件" />
29      <MyClassCmp name="类组件" />
30    </div>
31  </div>
32);
33
34ReactDOM.render(jsx, document.getElementById("root"));

react.js

以下就是 react 的 mini 版实现

1/**
2 * 创建虚拟dom函数
3 *
4 * @param {*} type // 节点类型
5 * @param {*} props // 属性参数
6 * @param {*} children // 子组件
7 * @return {*}
8 */
9function createElement(type, props, ...children) {
10  console.log("type", type);
11  props.children = children;
12  let vtype;
13  if (typeof type === "string") {
14    // 判断类型为string则是原生html类型
15    vtype = 1;
16  }
17  if (typeof type === "function") {
18    // 判断是否是函数组件或类组件
19    vtype = type.isReactComponent ? 2 : 3; // 判断是函数组件还是类组件
20  }
21  return {
22    // 返回虚拟dom节点
23    vtype, // 虚拟dom类型
24    type, // 节点类型
25    props, // 属性参数
26  };
27}
28
29//类组件定义
30class Component {
31  static isReactComponent = true;
32  constructor(props) {
33    this.props = props;
34    this.state = {};
35  }
36  setState = () => {};
37}
38
39export default {
40  createElement,
41  Component,
42};

react-dom.js

以下就是react-dom的迷你版实现

1//渲染函数
2function render(vnode, container) {
3  mount(vnode, container);
4}
5
6//主挂载函数
7function mount(vnode, container) {
8  const { vtype } = vnode;
9  if (!vtype) {
10    //处理文本节点
11    mountTextNode(vnode, container);
12  }
13  if (vtype === 1) {
14    //处理原生标签
15    mountHtml(vnode, container);
16  }
17  if (vtype === 3) {
18    //处理函数组件
19    mountFunc(vnode, container);
20  }
21  if (vtype === 2) {
22    //处理class组件
23    mountClass(vnode, container);
24  }
25}
26
27//文本节点挂载函数
28function mountTextNode(vnode, container) {
29  const node = document.createTextNode(vnode);
30  container.appendChild(node);
31}
32
33//原生节点挂载函数
34function mountHtml(vnode, container) {
35  const { type, props } = vnode;
36  const node = document.createElement(type); //创建一个真实dom
37  const { children, ...rest } = props;
38  children.map((item) => {
39    //子元素递归
40    if (Array.isArray(item)) {
41      item.map((c) => {
42        mount(c, node);
43      });
44    } else {
45      mount(item, node);
46    }
47  });
48  Object.keys(rest).map((item) => {
49    if (item === "className") {
50      node.setAttribute("class", rest[item]);
51    }
52    if (item.slice(0, 2) === "on") {
53      node.addEventListener("click", rest[item]);
54    }
55  });
56  container.appendChild(node);
57}
58
59//函数组件挂载函数
60function mountFunc(vnode, container) {
61  const { type, props } = vnode;
62  const node = new type(props);
63  mount(node, container);
64}
65
66//类组件挂载函数
67function mountClass(vnode, container) {
68  const { type, props } = vnode;
69  const node = new type(props);
70  mount(node.render(), container);
71}
72
73export default {
74  render,
75};

验证效果

以上就实现了mini react的渲染

下一个泡泡玛特工程师是谁呢？

机械键盘相关参数

Web 前端性能优化

Blender常用快捷键

Docker 常用命令

项目管理

JS沙箱sandbox的各种实现

Amazing！Solid 比react还react

puppeteer应用

做一个web termianl

TypeScript里常用的工具类型

Vim大法好

碧血丹心

chrome V8 引擎中的垃圾回收机制

如何开发一个cli

Javascript中的哲学

React Redux 实现 （Context 版）

mobx-react 使用

Less中的for和forEach循环

Webpack Splitchunks 详解

ssh-keygen命令详解

使用CURL发送POST请求

Webpack Plugin 开发

JS 实现两个大数相加？

字典树 trie

浏览器原理问题

MacBook快速进入一个文件夹目录

react合成事件

mini webpack实现

设计模式

babel核心

React 15 和 React 16 的区别

React性能优化

交通信号灯实现

内存管理

前端安全

网络和并发

跨域方法

react virtualList 虚拟列表无限滚动实现

监控埋点方案

Mini useEffect实现

Mini useState 实现

React Fiber

React class组件和function组件异同

Lodash Get 实现

手写reduce实现

Hooks 原理概览

Hook原理——状态Hook

手写Mini Redux实现

legacy和concurrent模式

react架构

react核心api和jsx

setState是同步的还是异步的

如何使用NodeJs创建HTTP服务？

NodeJS 事件循环模型

Buffer

微前端解决方案-qiankun

React Mini版实现(1)

brew安装

CommonJS简易版实现

极品透明Dashboard样式分享

Stream

NodeJS全局对象

如何部署Nodejs服务

Events

用JS绘制背景，让CSS直接使用 'background:paint(xxx)'

Block Formatting Context 块级格式化上下文

如何使用Nodejs来创建一个TCP/UDP服务?

Mac使用tree生成目录结构

常见算法

前端缓存

前端答疑

Nodejs 网络 & HTTP

JavaScript AST 抽象语法树

nodejs里面向切面编程的一种范式

各种JS模块化特性

手写Ajax实现

手写PromiseA+实现

debug和内存泄露

Javascript prototype 原型链

React Redux 实现（Context 版）