Build your own React(1)-前言及准备工作

原文链接：Build your own React

前言

如果各位想阅读react源码，但是读了一段时间后发现无从下手，或者读起来很吃力，那么各位可以暂时跟着此系列文章。这个系列主要是为了让大家对react的整体架构有一个大概的了解，回过头再去阅读react源码也会稍微轻松一些。原文链接已经放在了文章的开头，由于原文是全英文，我在翻译的同时也会加上自己的一些思考。原文将从以下几个方面逐步介绍React的整体结构：

• Step I: The  createElement Function
• Step II: The  render Function
• Step III: Concurrent Mode 并发模式
• Step IV: Fibers
• Step V: Render and Commit Phases
• Step VI: Reconciliation
• Step VII: Function Components
• Step VIII: Hooks

创建项目

运行命令：yarn create vite build-your-own-react

选择 vanilla模式

创建好的目录结构如下：

- pubilc
  - vite.svg
- counter.js
- index.html
- javascript.svg
- main.js
- package.json
- style.css

我们稍微修改一下文件目录结构：

- react
  - index.js
  - render.js
  - createElement.js
- index.html
- main.js
- package.json

我们将在render.js，createElement.js中编写主要的react函数，通过react/index.js暴漏出去

在main.js中编写DOM节点，通过react/index.js中的方法挂载到index.html中根节点下，并在index.html中引入main.js文件

运行yarn dev启动项目

综上，准备工作就完成了，让我们进入到原文第一个章节。

Step Zero: Review

首先让我们复习一些基础概念。如果你对React，JSX以及DOM元素如何关联有过了解，那么你可以跳过这里。

我们将使用如下只有三行代码的示例逐步讲解：

const element = <h1 title="foo">Hello</h1>
const container = document.getElementById("root")
ReactDOM.render(element, container)

第一行定义了一个React节点元素

第二行获取index.html中的根节点

第三行将定义的React节点挂载到根节点上

接下来把这段代码替换成普通的js代码：

React.createElement

第一行我们定义了一个JSX元素，要想被js识别，需要经过Babel转译，将标签内的代码替换成调用createElement方法，将标签名，属性，子元素作为参数传递，如下：

const element = React.createElement(
  "h1",
  { title: "foo" },
  "Hello"
)

React.createElement需根据参数返回一个对象，这个对象需要包含两个属性：

• type：一个字符串，执行我们要创建的DOM节点的类型，是我们要创建HTML元素时传递给document.createElement的tagName。type也可以是函数，将在以后介绍
• props：一个对象，包含了JSX元素的各种属性以及其子元素的各种属性

const element = {
  type: "h1",
  props: {
    title: "foo",
    // 在这里例子中children是一个字符串
    // 但是通常children应该是一个包含了全部子元素的数组
    children: "Hello",
  },
}

ReactDOM.render

render是React更新DOM的方法，这里我们自己来简单实现这个方法：

** To avoid confusion, I’ll use “element” to refer to React elements and “node” for DOM elements.*

首先我们根据type创建h1标签，并为元素添加属性，这里只有title属性

const node = document.createElement(element.type)
node["title"] = element.props.title

使用textNode设置子元素nodeValue，并且在未来如果子元素仅是一个文本节点，我们将会设置props: {nodeValue: "hello"}

const text = document.createTextNode("")
text["nodeValue"] = element.props.children

最后我们将textNode添加进h1标签，并把h1标签添加进根节点中

node.appendChild(text)
container.appendChild(node)

完成以上工作，main.js的完成代码如下：

const element = {
  type: "h1",
  props: {
    title: "foo",
    children: "Hello",
  },
};
​
const container = document.getElementById("root");
​
const node = document.createElement(element.type);
node["title"] = element.props.title;
​
const text = document.createTextNode("");
text["nodeValue"] = element.props.children;
​
node.appendChild(text);
container.appendChild(node);
​

运行项目，我们将看到hello已经显示在页面上了，并且title属性也正确渲染：

总结

恭喜你，在没有使用React方法的情况下，已经成功渲染了H1标签，在之后的文章中，我们将循序渐进编写我们自己的creatElement及render函数。