阅读 Build your own React 的一点记录
前情提要,也可以当作是一个小目录吧,我会在阅读完后把自己的理解做一个输出,励志让所有有 React 基本功的同学都能看懂。
我们将从头开始重写 React。一步步。遵循真实 React 代码的架构,但没有所有优化和非必要功能。
如果您阅读过我之前的任何一篇“构建自己的 React”文章,不同之处在于这篇文章基于 React 16.8,因此我们现在可以使用 hooks 并删除所有与类相关的代码。
您可以在Didact repo上找到包含旧博客文章和代码的历史记录。还有一个涵盖相同内容的演讲。但这是一个独立的帖子。
从头开始,这些是我们将一一添加到我们的 React 版本中的所有内容:
- 第一步:
createElement
功能- 第二步:
render
函数- 第三步:并发模式
- 第四步:纤维
- 第五步:渲染和提交阶段
- 第六步:和解
- 第七步:功能组件
- 第八步:钩子
Step I: The createElement Function
分析一下一个 React 元素转换成 DOM 的过程:程序员使用 React.createElement 并传入对应的 type 、props、children 参数后会生成一个 React Element,后由 ReactDOM 核心 API render 方法去将它转换成 DOM。知道了上述的生成逻辑就好办了。
第一个阶段:创建一个我们自己的 createElement 方法。
首先我们要了解 React 元素是如何转换成 DOM 节点的?我目前的理解其实 React 元素本质上就是一个对象。第一步就是创建一个类似于 React 元素的一个对象
用 JS 来创建一个 DOM元素
下一步我们要了解抛开 React 我们要如何用 JS 代码创建一个 DOM。
初始化一个 HTML 并声明一个 root 根节点来放页面的内容。
html
1 |
|
获取 root 节点,用 DOM API 写入一个节点
javascript
1 | // 获得 root 根节点 |
了解 React.createElement 传递参数和执行后产出的内容
javascript
1 | // 这就是一个 React 元素的全貌了 |
创建我们自己的 createElement func
javascript
1 | // MyReact.js |
使用我们的 createElement 来创建 MyReact 元素
javascript
1 | const element = MyReact.createElement( |
告诉 Babel 用我们指定的 createElement
但是我们仍然想在这里使用 JSX。我们如何告诉 babel 使用 MyReact 的createElement
而不是 React 的?
javascript
1 | /** @jsx MyReact.createElement */ |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 从0到1学技术!