适合人群
本文适合 0.5~3 年的 react 开发人员的进阶。
讲讲废话:
react 的源码,的确是比 vue 的难度要深一些,本文也是针对初中级,本意让博友们了解整个 react 的执行过程。
写源码之前的必备知识点
JSX
首先我们需要了解什么是 JSX。
网络大神的解释:React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
是的,JSX 是一种 js 的语法扩展,表面上像 HTML,本质上还是通过 babel 转换为 js 执行。再通俗的一点的说,jsx 就是一段 js,只是写成了 html 的样子,而我们读取他的时候,jsx 会自动转换成 vnode 对象给我们,这里都由 react-script 的内置的 babel 帮助我们完成。
简单举个栗子:
return (
<div>
Hello Word </div>
)
实际上是:
return React.createElement(
"div",
null,
"Hello"
)
复制代码
JSX 本质上就是转换为 React.createElement 在 React 内部构建虚拟 Dom,最终渲染出页面。
虚拟 Dom
这里说明一下 react 的虚拟 dom。react 的虚拟 dom 跟 vue 的大为不同。vue 的虚拟 dom 是为了是提高渲染效率,而 react 的虚拟 dom 是一定需要。很好理解,vue 的 template 本身就是 html,可以直接显示。而 jsx 是 js,需要转换成 html,所以用到虚拟 dom。
我们描述一下 react 的最简版的 vnode:
function createElement(type, props, ...children) {
props.children = children;
return {
type,
props,
children,
};
}
复制代码
这里的 vnode 也很好理解,type 表示类型,如 div,span,props 表示属性,如{id: 1, style:{color:red}},children 表示子元素下边会在 createElement 继续讲解。
原理简介
我们写一个 react 的最简单的源码:
import React from 'react'
import ReactDOM from 'react-dom'
function App(props){
return <div>你好</div>
</div>
}
ReactDOM.render(<App/>, document.getElementById('root'))
复制代码
为什么呢?可以这样理解,在我们上述的 js 文件中,我们使用了 jsx。但是 jsx 并不能给编译,所以,报错了。这时候,需要引入 react,而 react 的作用,就是把 jsx 转换为“虚拟 dom”对象。
JSX 本质上就是转换为 React.createElement 在 React 内部构建虚拟 Dom,最终渲染出页面。而引入 React,就是为了时限这个过程。
理解好这一步,我们再看 ReactDOM。React 将 jsx 转换为“虚拟 dom”对象。我们再利用 ReactDom 的虚拟 dom 通过 render 函数,转换成 dom。再通过插入到我们的真是页面中。
这就是整个 mini react 的一个简述过程。
手写 react 过程
1)基本架子的搭建
react 的功能化问题,暂时不考虑。例如,启动 react,怎么去识别 JSX,实现热更新服务等等,我们的重点在于 react 自身。我们借用一下一下 react-scripts 插件。
有几种种方式创建我们的基本架子:
利用 create-react-app zwz_react_origin 快速搭建,然后删除原本的 react,react-dom 等文件。(zwz_react_origin 是我的项目名称)
第二种,复制下边代码。新建 package.json
然后新建 public 下边的 index.html
再新建 src 下边的 index.js
这时候 react-scripts 会快速的帮我们定为到 index.html 以及引入 index.js
这样,一个可以写 react 源码的轮子就出来了。
2) React 的源码
let obj = (
<div>
<div className="class_0">你好</div>
</div>
);
console.log(`obj=${ JSON.stringify( obj) }`);
复制代码
首先,我们上述代码,如果我们不 import React 处理的话,我们可以打印出:'React' must be in scope when using JSX react/react-in-jsx-scope 是的,编译不下去,因为 js 文件再 react-script,他已经识别到 obj 是 jsx。该 jsx 却不能解析成虚拟 dom, 此时我们的页面就会报错。通过资料的查阅,或者是源码的跟踪,我们可以知道,实际上,识别到 jsx 之后,会调用页面中的 createElement 转换为虚拟 dom。
我们 import React,看看打印出来什么?
+ import React from "react";
let obj = (
<div>
<div className="class_0">你好</div>
</div>
);
console.log(`obj:${ JSON.stringify( obj) }`);
结果:
jsx={"type":"div","key":null,"ref":null,"props":{"children":{"type":"div","key":null,"ref":null,"props":{"className":"class_0","children":"你好"},"_owner":null,"_store":{}}},"_owner":null,"_store":{}}
复制代码
由上边结论可以知道, babel 会识别到我们的 jsx,通过 createElement 并将其 dom(html 语法)转换为虚拟 dom。从上述的过程,我们可以看到虚拟 dom 的组成,由 type,key,ref,props 组成。我们来模拟 react 的源码。
此时我们已经知道 react 中的 createElement 的作用是什么,我们可以尝试着自己来写一个 createElement(新建 react.js 引入并手写下边代码):
function createElement() {
console.log("createElement", arguments);
}
export default {
createElement,
};
复制代码
此时的打印结果:
我们可以看出对象传递的时候,dom 的格式,先传入 type, 然后 props 属性,我们根据原本 react 模拟一下这个对象转换的打印:
function createElement(type, props, ...children) {
props.children = children;
return {
type,
props,
};
}
复制代码
这样,我们已经把最简版的一个 react 实现,我们下边继续看看如何 render 到页面
3) ReactDom.render
import React from "react";
+ import ReactDOM from "react-dom";
let jsx = (
<div>
<div className="class_0">你好</div>
</div>
);
// console.log(`jsx=${ JSON.stringify( jsx) }`);
+ ReactDOM.render(jsx, document.getElementById("root"));
复制代码
如果此时,我们引入 ReactDom,通过 render 到对应的元素,整个简版 react 的就已经完成,页面就会完成渲染。首先,jsx 我们已经知道是一个 vnode,而第二个元素即是渲染上页面的元素,假设我们的元素是一个 html 原生标签 div。我们新建一个 reactDom.js 引入。相关参考视频讲解:进入学习
function render(vnode, container) {
mount(vnode, container);
}
function mount(vnode, container){
const { type, props } = vnode;
const node = document.createElement(type);//创建一个真实dom
const { children, ...rest } = props;
children.map(item => {//子元素递归
if (Array.isArray(item)) {
item.map(c => {
mount(c, node);
});
} else {
mount(item, node);
}
});
container.appendChild(node);
}
//主页:
- import React from "react";
- import ReactDOM from "react-dom";
+ import React from "./myReact/index.js";
+ import ReactDOM from "./myReact/reactDom.js";
let jsx = (
<div>
<div className="class_0">你好</div>
</div>
);
ReactDOM.render(jsx, document.getElementById("root"));
复制代码
此时,我们可以看到页面,我们自己写的一个 react 渲染已经完成。我们优化一下。
首先,这个过程中, className="class_0"消失了。我们想办法渲染上页面。此时,虚拟 dom 的对象,没有办法,区分,哪些元素分别带有什么属性,我们在转义的时候优化一下 mount。
function mount(vnode, container){
const { type, props } = vnode;
const node = document.createElement(type);//创建一个真实dom
const { children, ...rest } = props;
children.map(item => {//子元素递归
if (Array.isArray(item)) {
item.map(c => {
mount(c, node);
});
} else {
mount(item, node);
}
});
// +开始
Object.keys(rest).map(item => {
if (item === "className") {
node.setAttribute("class", rest[item]);
}
if (item.slice(0, 2) === "on") {
node.addEventListener("click", rest[item]);
}
});
// +结束
container.appendChild(node);
}
复制代码
4) ReactDom.Component
看到这里,整个字符串 render 到页面渲染的过程已完成。此时入口文件已经解决了。对于原始标签 div, h1 已经兼容。但是对于自定义标签呢?或者怎么完成组件化呢。
我们先看 react16+的两种组件化模式,一种是 function 组件化,一种是 class 组件化。
首先,我们先看看 demo.
import React, { Component } from "react";
import ReactDOM from "react-dom";
class MyClassCmp extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="class_2" >MyClassCmp表示:{this.props.name}</div>
);
}
}
function MyFuncCmp(props) {
return <div className="class_1" >MyFuncCmp表示:{props.name}</div>;
}
let jsx = (
<div>
<h1>你好</h1>
<div className="class_0">前端小伙子</div>
<MyFuncCmp />
<MyClassCmp />
</div>
);
ReactDOM.render(jsx, document.getElementById("root"));
复制代码
先看简单点一些的 Function 组件。暂不考虑传递值等问题,Function 其实跟原本组件不一样的地方,在于他是个函数,而原本的 jsx,是一个字符串。我们可以根据这个特点,将函数转换为字符串,那么 Function 组件即跟普通标签同一性质。
我们写一个方法:
mountFunc(vnode, container);
function mountFunc(vnode, container) {
const { type, props } = vnode;
const node = new type(props);
mount(node, container);
}
复制代码
此时 type 即是函数体内容,我们只需要实例化一下,即可跟拿到对应的字符串,即是普通的 vnode。再利用我们原来的 vnode 转换方法,即可实现。
按照这个思路,如果我们不考虑生命周期等相对复杂的东西。我们也相对简单,只需拿到类中的 render 函数即可。
mountFunc(vnode, container);
function mountClass(vnode, container) {
const { type, props } = vnode;
const node = new type(props);
mount(node.render(), container);
}
复制代码
这里可能需注意,class 组件,需要继承 React.Component。截图一下 react 自带的 Component
可以看到,Component 统一封装了,setState,forceUpdate 方法,记录了 props,state,refs 等。我们模拟一份简版为栗子:
class Component {
static isReactComponent = true;
constructor(props) {
this.props = props;
this.state = {};
}
setState = () => {};
}
复制代码
再添加一个标识,isReactComponent 表示是函数数组件化。这样的话,我们就可以区分出:普通标签,函数组件标签,类组件标签。
我们可以重构一下 createElement 方法,多定义一个 vtype 属性,分别表示
根据上述标记,我们可改造为:
function createElement(type, props, ...children) {
props.children = children;
let vtype;
if (typeof type === "string") {
vtype = 1;
}
if (typeof type === "function") {
vtype = type.isReactComponent ? 2 : 3;
}
return {
vtype,
type,
props,
};
复制代码
那么,我们处理时:
function mount(vnode, container) {
const { vtype } = vnode;
if (vtype === 1) {
mountHtml(vnode, container); //处理原生标签
}
if (vtype === 2) {
//处理class组件
mountClass(vnode, container);
}
if (vtype === 3) {
//处理函数组件
mountFunc(vnode, container);
}
}
复制代码
至此,我们已经完成一个简单可组件化的 react 源码。不过,此时有个 bug,就是文本元素的时候异常,因为文本元素不带标签。我们优化一下。
function mount(vnode, container) {
const { vtype } = vnode;
if (!vtype) {
mountTextNode(vnode, container); //处理文本节点
}
//vtype === 1
//vtype === 2
// ....
}
//处理文本节点
function mountTextNode(vnode, container) {
const node = document.createTextNode(vnode);
container.appendChild(node);
}
复制代码
简单源码:
package.json:
{
"name": "zwz_react_origin",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }}
复制代码
index.js
import React from "./wzReact/";
import ReactDOM from "./wzReact/ReactDOM";
class MyClassCmp extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="class_2" >MyClassCmp表示:{this.props.name}</div>
);
}
}
function MyFuncCmp(props) {
return <div className="class_1" >MyFuncCmp表示:{props.name}</div>;
}
let jsx = (
<div>
<h1>你好</h1>
<div className="class_0">前端小伙子</div>
<MyFuncCmp name="真帅" />
<MyClassCmp name="还有钱" />
</div>
);
ReactDOM.render(jsx, document.getElementById("root"));
复制代码
/wzReact/index.js
function createElement(type, props, ...children) {
console.log("createElement", arguments);
props.children = children;
let vtype;
if (typeof type === "string") {
vtype = 1;
}
if (typeof type === "function") {
vtype = type.isReactComponent ? 2 : 3;
}
return {
vtype,
type,
props,
};
}
class Component {
static isReactComponent = true;
constructor(props) {
this.props = props;
this.state = {};
}
setState = () => {};
}
export default {
Component,
createElement,
};
复制代码
/wzReact/ReactDOM.js
function render(vnode, container) {
console.log("render", vnode);
//vnode-> node
mount(vnode, container);
// container.appendChild(node)
}
// vnode-> node
function mount(vnode, container) {
const { vtype } = vnode;
if (!vtype) {
mountTextNode(vnode, container); //处理文本节点
}
if (vtype === 1) {
mountHtml(vnode, container); //处理原生标签
}
if (vtype === 3) {
//处理函数组件
mountFunc(vnode, container);
}
if (vtype === 2) {
//处理class组件
mountClass(vnode, container);
}
}
//处理文本节点
function mountTextNode(vnode, container) {
const node = document.createTextNode(vnode);
container.appendChild(node);
}
//处理原生标签
function mountHtml(vnode, container) {
const { type, props } = vnode;
const node = document.createElement(type);
const { children, ...rest } = props;
children.map(item => {
if (Array.isArray(item)) {
item.map(c => {
mount(c, node);
});
} else {
mount(item, node);
}
});
Object.keys(rest).map(item => {
if (item === "className") {
node.setAttribute("class", rest[item]);
}
if (item.slice(0, 2) === "on") {
node.addEventListener("click", rest[item]);
}
});
container.appendChild(node);
}
function mountFunc(vnode, container) {
const { type, props } = vnode;
const node = new type(props);
mount(node, container);
}
function mountClass(vnode, container) {
const { type, props } = vnode;
const cmp = new type(props);
const node = cmp.render();
mount(node, container);
}
export default {
render,
};
复制代码
至此,本文 mini 简单版本源码结束,代码将在文章最后段送出。因本文定位初中级, 没有涉及 react 全家桶。下一篇,fiber,redux, hooks 等概念或者源码分析,将在新文章汇总出。如对你有用,关注期待后续文章。
评论