手写一个react，看透react运行机制

goClient1992

于 2022-12-14 08:40:55 发布

阅读量470

点赞数 1

文章标签： reactjs

本文链接：https://blog.csdn.net/It_kc/article/details/128310959

版权

本文适合0.5~3年经验的React开发者，旨在深入理解React执行机制。介绍了React源码的基础知识，包括JSX、虚拟DOM，并通过手写React及ReactDOM渲染过程，解析了React.createElement和Component的工作原理，最后实现了一个简单的组件化React。

摘要由CSDN通过智能技术生成

适合人群

本文适合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'))

React负责逻辑控制，数据 -> VDOM
首先，我们可以看到每一个js文件中，都一定会引入import React from ‘react’。但是我们的代码里边，根本没有用到React。但是你不引入他就报错了。

为什么呢？可以这样理解，在我们上述的js文件中，我们使用了jsx。但是jsx并不能给编译，所以，报错了。这时候，需要引入react，而react的作用，就是把jsx转换为“虚拟dom”对象。

JSX本质上就是转换为React.createElement在React内部构建虚拟Dom，最终渲染出页面。而引入React，就是为了时限这个过程。

ReactDom渲染实际DOM，VDOM -> DOM

理解好这一步，我们再看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

  {
    "name": "zwz_react_origin",
    "scripts": {
      "start": "react-scripts start"
    },
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "react-scripts": "3.4.1"
    },
  }

然后新建public下边的index.html

  <!DOCTYPE html>
  <html lang="en">
    <head>
    </head>
    <body>
      <div id="root"></div>
    </body>
  </html>

再新建src下边的index.js

这时候react-scripts会快速的帮我们定为到index.html以及引入index.js

  import React from "react";
  import ReactDOM from "react-dom";

  let jsx = (
    <div>
      <div className="">react启动成功</div>
    </div>
  );
  ReactDOM.render(jsx, document.getElementById("root"));

这样，一个可以写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":"你好"