建立你自己的react(一)----复习

站长

2024年04月19日 11:25 · 阅读数 2

前言

今天开始我们来学习《建立自己的react》系列，我计划用11篇的内容来完整的带领大家创建react的重要内容，希望大家能有所收获

react的核心设计思路

我们要带着目的去学习一个东西，比如我要学习源码，他可以让我收获什么？

比如我们要学习react源码，我们首先要弄懂，react的设计理念，是的，他这样子实现，是基于什么设计理念呢？我们以后如果设计程序，是不是也可以把这个设计理念考虑进去呢？

React 是一个网页 UI 框架，通过组件化的方式解决视图层开发复用的问题，本质是一个组件化框架。

组件化：将界面拆分为独立可复用的组件。
虚拟 DOM：高效地更新 DOM，提高性能。虚拟dom的最大优点还有通用性，写一份代码，可以转化为好多端的代码，所以这就是为什么现在好多安卓，ios，小程序可以使用react语法来写的原因
数据驱动：通过状态管理来驱动界面的更新。

从头开始

我们将从头开始，一步一步的重写react。遵循真正的react代码的体系架构，但不包括所有的优化和非必要的功能。

如果你已经读过我的任何一篇"建立你自己的react"的文章。不同点是这次的文章是基于react 16.8版本。所以我们可以使用hooks，并且放弃所有与类相关的代码。

从头开始，以下的内容我们将一步又一步的添加到我们的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

第零步: 复习

首先让我们来复习一下基本的概念，如果你已经对react，jsx和dom的工作方式有很好的了解那么你可以跳过这一步

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

仅仅这三行代码，首先我们定义了一个react element。接下来从dom中获取一个节点。最后一步在container中渲染react element。

让我们删除所有react指定的代码，替换为普通的js代码

在第一行中，我们有这个element，被定义为JSX。它不是一个有效的javascript, 所以为了替换为有效的JavaScript，所以首先我们要替换他为一个有效的js。

jsx通过构建工具babel，转化为普通js。这个转化通常是简单的：通过调用createElement方法替换在标签(标签就是

)的代码。传递标签名，props和子元素作为参数。

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

React.createElement会创建一个对象，从他的参数中。除了一些验证，那么他基本就是这样。所以我们可以安全的把函数调用替换为他的输出

const element = {
    type: "h1",
    props: {
        title: "foo",
        children: "Hello",
    },
}

这就是一个element，包含两个属性，一个是type，一个是props(它可能更多，但我们只需要关心这两个)

这个type是一个我想创建的dom节点的指定类型，是一个字符串。当你想创建一个HTML元素的时候，你可以把这个标签名传给document.createElement。

props是另一个对象，他拥有来自jsx属性的所有key和value。他也有一个指定的属性: children

children在这里是一个字符串，但是它通常是一个拥有很多element的数组，这就是为什么elements也是一个树了。

ReactDOM.render(element, container)

我们需要替换的另一块react代码是对ReactDOM.render函数的调用。render是React改变dom的地方，所以让我们自己来更新吧。

首先让我们使用element.type来创建一个node节点，这里是h1。

const node = document.createElement(element.type)

接下来我们赋值所有的props属性在这个node节点上, 这里仅仅有一个title

node["title"] = element.props.title

为了避免混淆混淆，我将使用element来指定React元素,node指定DOM元素

然后我们在创建一个子节点为了这个children，因为我们子节点是一个文本，所以我们只需要创建一个文本节点。

使用文本节点而不是设置innerText，将允许我们在接下来使用同样的方法处理所有的这种元素。

最后我们append这个文本节点在h1上面并且讲这个h1元素append到container上

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

现在我们拥有了和使用React一样的应用，但是我们没有使用React。

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)

参考

build your own react