React源码之组件的实现与首次渲染
react: v15.0.0
本文讲 组件如何编译 以及 ReactDOM.render 的渲染过程。
babel 的编译
babel 将 React JSX 编译成 JavaScript.
在 babel 官网写一段 JSX 代码编译结果如图:
每个标签的创建都调用了 React.createElement.
源码中的两种数据结构
贯穿源码,常见的两种数据结构,有助于快速阅读源码。
ReactElement
结构如下:
{
$$typeof // ReactElement标识符
type // 组件
key
ref
props // 组件属性和children
}
是 React.createElement 的返回值。
ReactComponent
ReactComponent 这个名字有点奇怪。
结构如下:
{
_currentElement // ReactElement
...
// 原型链上的方法
mountComponent, // 组件初次加载调用
updateComponent, // 组件更新调用
unmountComponent, // 组件卸载调用
}
是 ReactCompositeComponent 的 instance 类型。其余三种构造函数 ReactDOMComponent、ReactDOMTextComponent、ReactEmptyComponent 的实例结构与其相似。
React.createElement
React.createElement 实际执行的是 ReactElement.createElement。
ReactElement.createElement 接收三个参数:
- type: string | Component
- config: 标签上的属性
- ...children: children元素集合
重点关注 type 和 props。
然后看 ReactElement 方法,只是做了赋值动作。
综上,我们写的代码编译后是这样的:
class C extends React.Component {
render() {
return {
type: "div",
props: {
children: this.props.value,
},
};
}
}
class App extends React.Component {
render() {
return {
type: "div",
props: {
children: [
{
type: "span",
props: {
children: "aaapppppp",
},
},
"123",
{
type: C,
props: {
value: "ccc",
},
},
]
},
};
}
}
ReactDOM.render(
{
type: App,
props: {},
},
document.getElementById("root")
);
ReactDOM.render
先来看下 ReactDOM.render 源码的执行过程
instantiateReactComponent
在 _renderNewRootComponent 方法中,调用了 instantiateReactComponent,生成了的实例结构类似于 ReactComponent。
instantiateReactComponent 的参数是 node,node 的其中一种格式就是 ReactElement。
根据 node & node.type 的类型,会执行不同的方法生成实例
- ReactCompositeComponent
- ReactDOMComponent
- ReactDOMTextComponent
- ReactEmptyComponent
简化如下
var instantiateReactComponent = function (node) {
if (node === null || node === false) {
return new ReactEmptyComponent(node);
} else if (typeof node === 'object') {
if (node.type === 'string') {
return new ReactDOMComponent(node);
} else {
return new ReactCompositeComponent(node);
}
} else if (typeof node === 'string' || typeof node === 'number') {
return new ReactDOMTextComponent(node);
}
}
通过四种方式实例化后的对象基本相似
var instance = {
_currentElement: node,
_rootNodeID: null,
...
}
instance.__proto__ = {
mountComponent,
updateComponent,
unmountComponent,
}
四种 mountComponent 简化如下
ReactCompositeComponent
mountComponent: function () {
// 创建当前组件的实例
this._instance = new this._currentElement.type();
// 调用组件的 render 方法,得到组件的 renderedElement
renderedElement = this._instance.render();
// 调用 instantiateReactComponent, 得到 renderedElement 的实例化 ReactComponent
this._renderedComponent = instantiateReactComponent(renderedElement);
// 调用 ReactComponent.mountComponent
return this._renderedComponent.mountComponent();
}
ReactDOMComponent
react 源码中,插入 container 前使用 ownerDocument、DOMLazyTree 创建和存放节点,此处为了方便理解,使用 document.createElement 模拟。
mountComponent: function () {
var { type, props } = this._currentElement;
var element = document.createElement(type);
if (props.children) {
var childrenMarkups = props.children.map(function (node) {
var instance = instantiateReactComponent(node);
return instance.mountComponent();
})
element.appendChild(childrenMarkups)
}
return element;
}
ReactDOMTextComponent
mountComponent: function () {
return this._currentElement;
}
ReactEmptyComponent
mountComponent: function () {
return null;
}
ReactDOM.render 简化
简化如下:
ReactDOM.render = function (nextElement, container) {
var nextWrappedElement = ReactElement(
TopLevelWrapper,
null,
null,
null,
null,
null,
nextElement
);
var componentInstance = instantiateReactComponent(nextElement);
var markup = componentInstance.mountComponent;
container.innerHTML = markup;
}
总结
- babel 将 JSX 语法编译成 React.createElement 形式。
- 源码中用到了两个重要的数据结构
- ReactElement
- ReactComponent
- React.createElement 将我们写的组件处理成 ReactElement 结构。
- ReactDOM.render 传入 ReactElement 和 container, 渲染流程如下
- 在 ReactElement 外套一层,生成新的 ReactElement
- 实例化 ReactElement:var instance = instantiateReactComponent(ReactElement)
- 递归生成 markup:var markup = instance.mountComponent()
- 将 markup 插入 container:container.innerHTML = markup
React源码之组件的实现与首次渲染的更多相关文章
- React源码剖析系列 - 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...
- React 源码剖析系列 - 不可思议的 react diff
简单点的重复利用已有的dom和其他REACT性能快的原理. key的作用和虚拟节点 目前,前端领域中 React 势头正盛,使用者众多却少有能够深入剖析内部实现机制和原理. 本系列文章希望通过剖析 ...
- React 源码剖析系列 - 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期 ...
- React躬行记(16)——React源码分析
React可大致分为三部分:Core.Reconciler和Renderer,在阅读源码之前,首先需要搭建测试环境,为了方便起见,本文直接采用了网友搭建好的环境,React版本是16.8.6,与最新版 ...
- React源码 commit阶段详解
转: React源码 commit阶段详解 点击进入React源码调试仓库. 当render阶段完成后,意味着在内存中构建的workInProgress树所有更新工作已经完成,这包括树中fiber节点 ...
- React源码解析:ReactElement
ReactElement算是React源码中比较简单的部分了,直接看源码: var ReactElement = function(type, key, ref, self, source, owne ...
- react 源码之setState
今天看了react源码,仅以记录. 1:monorepo (react 的代码管理方式) 与multirepo 相对. monorepo是单代码仓库, 是把所有相关项目都集中在一个代码仓库中,每个mo ...
- 读react源码准备
git源码地址:https://github.com/facebook/react react 里面就是 react源码 react里面的react文件夹就是react源码,react源码非常的少,总 ...
- react源码之render
1.最近学习react源码,刚刚入门,看了render的原理,到了fiberRoot的创建 如图:
随机推荐
- Java实现 LeetCode 680 验证回文字符串 Ⅱ(暴力)
680. 验证回文字符串 Ⅱ 给定一个非空字符串 s,最多删除一个字符.判断是否能成为回文字符串. 示例 1: 输入: "aba" 输出: True 示例 2: 输入: " ...
- SQL Server账号密码(sa)登录失败 错误原因:18456
(其实以前经常用的时候,都很简单,最近一段时间不用了,再一看发现都忘记的差不多了,还是写一篇博客吧,防止下一次再在这种问题上面浪费时间) 使用window登录 打开属性 打开安全性 选择SQL ser ...
- Java实现蓝桥杯勾股定理
勾股定理,西方称为毕达哥拉斯定理,它所对应的三角形现在称为:直角三角形. 已知直角三角形的斜边是某个整数,并且要求另外两条边也必须是整数. 求满足这个条件的不同直角三角形的个数. [数据格式] 输入一 ...
- Java实现 蓝桥杯 历届试题幸运数
问题描述 幸运数是波兰数学家乌拉姆命名的.它采用与生成素数类似的"筛法"生成 . 首先从1开始写出自然数1,2,3,4,5,6,- 1 就是第一个幸运数. 我们从2这个数开始.把所 ...
- Java实现第九届蓝桥杯哪天返回
哪天返回 题目描述 小明被不明势力劫持.后被扔到x星站再无问津.小明得知每天都有飞船飞往地球,但需要108元的船票,而他却身无分文. 他决定在x星战打工.好心的老板答应包食宿,第1天给他1元钱. 并且 ...
- java实现第三届蓝桥杯填算式
** 填算式** [结果填空] (满分11分) 看这个算式: ☆☆☆ + ☆☆☆ = ☆☆☆ 如果每个五角星代表 1 ~ 9 的不同的数字. 这个算式有多少种可能的正确填写方法? 173 + 286 ...
- Linux目录处理命令mkdir详解
mkdir(英文原意:make directories),基本作用是创建新的目录,命令的路径及权限: 可以看到,这个命令的路径是/usr/bin/mkdir,所以它的执行权限是所有用户 mkdir 创 ...
- 从零搭建Window前端开发环境
前言 作为一个小前端,是否因为搭建环境烦恼过,是否因为npm等国外镜像踩坑过,不要怕,接下来跟着我一步步搭建适合自己的开发环境吧!!! node 这个不用说了吧,我们经常和他打交道,无论是 gulp. ...
- java正则匹配 指定内容以外的 内容
今天,遇到一个需要 匹配出 指定内容以外的 内容的需求. 乍一看,需求貌视很简单啊,直接上 非贪婪模式的 双向零宽断言(有的资料上也叫 预搜索.预查.环视lookaround): 比如,我要匹配 串内 ...
- NAT网络地址转化和DHCP
DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)通常被应用在大型的局域网络环境中,主要作用是集中的管理.分配IP地址,使网络环境中的主机动态的获得I ...