React笔记-首次渲染
渲染机制
渲染机制主要分为两部分: 首次渲染和更新渲染。
首次渲染
首先通过一个小例子,来讲解首次渲染过程。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
class ClickCounter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
handleClick = () => {
this.setState((state) => {
return {count: state.count + 1};
});
}
render() {
return [
<button key="1" onClick={this.handleClick}>Update counter</button>,
<span key="2">{this.state.count}</span>,
]
}
}
ReactDOM.hydrate(<ClickCounter />, document.getElementById('root'));
程序运行到ReactDOM.hydrate
时,其中的<ClickCounter />
已被babel
转换为React.createElement(ClickCounter, null)
,生成的element
如下:
{
$$typeof: Symbol(react.element),
key: null,
props: {},
ref: null,
type: ClickCounter
}
接下来执行hydrate
函数,生成root
节点。首先了解下fiber
的部分数据结构。
- alternate(对应的
workInProgress
或fiber
) - stateNode(关联的
fiber
,组件实例或者DOM
节点) - type(组件或
HTML tag
,如div
,span
等) - tag(类型,详见workTags)
- effectTag(操作类型,详见sideEffectTag)
- updateQueue(更新队列)
- memoizedState(
state
) - memoizedProps(
props
) - pendingProps(
VDOM
) - return(父
fiber
) - sibling(兄弟
fiber
) - child(孩子
fiber
) - firstEffect(第一个待处理的
effect fiber
) - lastEffect(最后一个待处理的
effect fiber
)
首次渲染会以同步渲染的方式进行渲染,首先创建一个update
,将element
装载到其payload
属性中,然后合并到root.current.updateQueue
,如果没有updateQueue
会创建一个。我们暂且将root.current
看成HostRoot
。
接着根据HostRoot
克隆一棵workInProgress
更新树。将HostRoot.alternate
指向workInProgress
,workInProgress.alternate
指向HostRoot
。然后进入workLoop
进行更新树操作部分。workLoop
的任务也很简单,就是将所有节点的更新挂载到更新树上。下面详细看看reconciliation
阶段。
reconciliation阶段
reconciliation
的核心在于workLoop
。workLoop
会以workInProgress
为起点,即克隆的HostRoot
,不断向下寻找。如果workInProgress.child
不为空,会进行diff
;如果为空会创建workInProgress.child`。
// 第一次循环nextUnitOfWork为workInProgress
function workLoop(isYieldy) {
if (!isYieldy) {
// Flush work without yielding
while (nextUnitOfWork !== null) {
nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
}
} else {
// Flush asynchronous work until there's a higher priority event
while (nextUnitOfWork !== null && !shouldYieldToRenderer()) {
nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
}
}
}
因为只涉及首次渲染,所以这里将performUnitOfWork
简单化。beginWork
根据workInProgress.tag
选择不同的处理方式。先暂且看看如何处理HostRoot
。进入updateHostRoot
方法,先进行workInProgress.updateQueue
的更新,计算新的state
,将update.baseState
和workInProgress.memoizedState
指向新的state
。这里新的state
装载的是element
。
接下来调用createFiberFromElement
创建fiber
,将workInProgress.child
指向该fiber
,fiber.return
指向workInProgress
。
function performUnitOfWork(workInProgress) {
let next = beginWork(workInProgress); // 创建workInProgress.child并返回
if (next === null) { // 没有孩子,收集effect list,返回兄弟或者父fiber
next = completeUnitOfWork(workInProgress);
}
return next;
}
function beginWork(workInProgress) {
switch(workInProgress.tag) {
case HostRoot:
return updateHostRoot(current, workInProgress, renderExpirationTime);
case ClassComponent:
...
}
}
用一张图体现更新树创建完成后的样子:
当workInProgress
没有孩子时,即创建的孩子为空。说明已经到达底部,开始收集effect
。
function completeUnitOfWork(workInProgress) {
while (true) {
let returnFiber = workInProgress.return;
let siblingFiber = workInProgress.sibling;
nextUnitOfWork = completeWork(workInProgress);
...// 省略收集effect list过程
if (siblingFiber !== null) {
// If there is a sibling, return it
// to perform work for this sibling
return siblingFiber;
} else if (returnFiber !== null) {
// If there's no more work in this returnFiber,
// continue the loop to complete the parent.
workInProgress = returnFiber;
continue;
} else {
// We've reached the root.
return null;
}
}
}
function completeWork(workInProgress) {
//根据workInProgress.tag创建、更新或删除dom
switch(workInProgress.tag) {
case HostComponent:
...
}
return null;
}
协调算法过程结束后,workInProgress
更新树更新完毕,收集的effect list
如下:
commit阶段
effect list
(链表)是reconciliation
阶段的结果,决定了哪些节点需要插入、更新和删除,以及哪些组件需要调用生命周期函数。firstEffect
记录第一个更新操作,firstEffect.nextEffect(fiber)
记录下一个,然后继续通过其nextEffect
不断往下寻找直至为null
。下面是commit阶段的主要流程:
// finishedWork为更新树
function commitRoot(root, finishedWork) {
commitBeforeMutationLifecycles();
commitAllHostEffects();
root.current = finishedWork;
commitAllLifeCycles();
}
变量nextEffect
每次执行完上面一个函数会被重置为finishedWork
。
commitBeforeMutationLifecycles
检查effect list
中每个fiber
是否有Snapshot effect
,如果有则执行getSnapshotBeforeUpdate
。
// 触发getSnapshotBeforeUpdate
function commitBeforeMutationLifecycles() {
while (nextEffect !== null) {
const effectTag = nextEffect.effectTag;
if (effectTag & Snapshot) {
const current = nextEffect.alternate;
commitBeforeMutationLifeCycles(current, nextEffect);
}
nextEffect = nextEffect.nextEffect;
}
}
commitAllHostEffects
提交所有effect
,实现dom
的替换、更新和删除。
function commitAllHostEffects() {
while(nextEffect !== null) {
var effectTag = nextEffect.effectTag;
var primaryEffectTag = effectTag & (Placement | Update | Deletion);
switch (primaryEffectTag) {
case Placement: {
commitPlacement(nextEffect);
...
}
case PlacementAndUpdate: {
commitPlacement(nextEffect);
var _current = nextEffect.alternate;
commitWork(_current, nextEffect);
...
}
case Update: {
var _current2 = nextEffect.alternate;
commitWork(_current2, nextEffect);
...
}
case Deletion: {// 触发componentWillUnmout
commitDeletion(nextEffect);
...
}
}
nextEffect = nextEffect.nextEffect;
}
}
commitAllLifeCycles
触发componentDidMount
或componentDidUpdate
function commitAllLifeCycles(finishedRoot, committedExpirationTime) {
while (nextEffect !== null) {
var effectTag = nextEffect.effectTag;
if (effectTag & (Update | Callback)) {
var current$$1 = nextEffect.alternate;
commitLifeCycles(finishedRoot, current$$1, nextEffect, committedExpirationTime);
}
if (effectTag & Ref) {
commitAttachRef(nextEffect);
}
if (effectTag & Passive) {
rootWithPendingPassiveEffects = finishedRoot;
}
nextEffect = nextEffect.nextEffect;
}
}
总结
这里并未逐一细说,不想读起来直犯困,更多讲述了大概流程。如果觉得有疑惑的地方,也知道该在什么地方找到对应的源码,解答疑惑。
更好的阅读体验在我的github,欢迎
React笔记-首次渲染的更多相关文章
- How React Works (一)首次渲染
How React Works (一)首次渲染 一.前言 本文将会通过一个简单的例子,结合React源码(v 16.4.2)来说明 React 是如何工作的,并且帮助读者理解 ReactElement ...
- React笔记_(3)_react语法2
React笔记_(3)_react语法2 state和refs props就是在render渲染时,向组件内传递的变量,这个传递是单向的,只能继承下来读取. 如何进行双向传递呢? state (状态机 ...
- react服务端渲染(同构)
学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想.打算研究一下react神奇服务端渲染. react服务端渲染只能使用nodejs做服务端语言实现前后端同构,在后台对re ...
- (十分钟视频教程)nodejs基础实战教程3:react服务端渲染入门篇
视频截图如下: (具体视频见文末) 前言: 这是小猫的第三篇node教程,本篇内容是由公众号粉丝票选得出的,相信大家对这篇教程是抱有较大希望的,这篇教程由小猫和一位多年的好朋友合作完成(笔名:谷雨,博 ...
- React 避免重渲染
组件的重新渲染 我们可以在 React 组件中的 props 和 state 存放任何类型的数据,通过改变 props 和 state,去控制整个组件的状态.当 props 和 state 发生变化时 ...
- React条件性渲染
React条件性渲染的方式和Vue是不同的,之前用vue做项目时觉得vue是在是强大,通过v-if就可以选择性的渲染组件,另外,对于列表的渲染更是方便,一个v-for就可以进行快速的渲染,但是Reac ...
- react基础学习和react服务端渲染框架next.js踩坑
说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...
- Electron结合React,在渲染进程中使用 node 模块
Electron结合React,在渲染进程中使用 node 模块 问题 将create-react-app与electron集成在了一个项目中.但是在React中无法使用electron.当在Reac ...
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
随机推荐
- Bitlocker驱动器加密使用
前言 Bitlocker驱动器加密可以将磁盘加密,确保数据的安全.如果被加密保护的磁盘是Windows Server 2012操作系统磁盘,即使他被拿到另外一台计算机启动,除非已解锁,否则无法启动 ...
- Android高级_第三方框架Xutils
xutils的功能主要包括有四个部分:(1)布局视图关联:(2)图片下载与缓存:(3)网络请求:(4)数据库: 1. 使用xutils进行视图注入: (1)在控件声明上方添加@ViewInject() ...
- document.getElementByClassName的兼容问题
if(!document.getElementsByClassName){ document.getElementsByClassName = function(className, element) ...
- SDN 第三次上机作业
SDN 第三次上机作业 1.创建拓扑 2.利用OVS命令下发流表,实现vlan功能 3.利用OVS命令查看流表 s1: s2: 4.验证性测试 5.Wireshark 抓包验证
- UltraISO制作使用(服务器装机u盘制作)
1.准备工作: 1)U盘一个,需要格式化(大于4G,毕竟ISO文件就已经大于4G了) 2)CentOS7.1 iso文件一个(去这里下载:http://www.centoscn.com/) 3)Ult ...
- python第二十九课——文件读写(readline()和readlines()的使用)
演示readline()和readlines()的使用: #1.打开文件 f3=open(r'a.txt','r',encoding='gbk') #2.读取数据 content3=f3.readli ...
- 随手练——HDU 1078 FatMouse and Cheese(记忆化搜索)
http://acm.hdu.edu.cn/showproblem.php?pid=1078 题意: 一张n*n的格子表格,每个格子里有个数,每次能够水平或竖直走k个格子,允许上下左右走,每次走的格子 ...
- Java之时间转换
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Date date = sdf.parse( ...
- css中的莫名空白间隙
此时div和img直接有空白,在他们父元素设置font-size:0;就可以解决了
- 参照示例搭建一个Quertz + Topshelf的一个作业调度服务(基础)
学习网址:Quartz.NET 入门.使用Topshelf创建Windows服务 来自七七资料 1.直接下载源码 2.配置完成后,安装服务测试应用. 以下是遇到情况和加入的一些内容 1.在进行服务安装 ...