一、ReactDOM.render 都干啥了
我们在写react的时候，最后一步肯定是
ReactDOM.render(
<div>
<Home name="home"/>
</div>
,
document.getElementById('app')
);
我们上面得知jsx被解析成了虚拟dom对象，我们把一个对象和一个dom传入render方法就得到了我们的页面，好神奇呀，我们开始撸到render方法：
const ReactDOM: Object = {
render(
element: React$Element<any>, // react组件对象
container: DOMContainer, // 就是id为app的那个dom
callback: ?Function, // callback 没有
) {
return legacyRenderSubtreeIntoContainer(
null,
element,
container,
false,
callback,
);
}
}
抛开typeScript那些恶心的类型限定不谈，我们发现render的实质就是调用并返回 legacyRenderSubtreeIntoContainer 这个函数执行后的结果，你看这个函数的命名：
legacy : 遗产 + render: 渲染 + subtree: 子树 + into: 到 + container: 容器
爱几把咋翻译咋翻译，大致意思就是说把 虚拟的dom树渲染到真实的dom容器中。此函数应当荣当 核心函数 宝座
二、legacyRenderSubtreeIntoContainer 又干了啥？
还是撸到丫的源码：
function legacyRenderSubtreeIntoContainer(
parentComponent: ?React$Component<any, any>, // null
children: ReactNodeList, // element 虚拟dom树
container: DOMContainer, // html中的dom根对象
forceHydrate: boolean, // false 服务器端渲染标识
callback: ?Function, // 回调函数 没有
) {
// 对container进行校验
invariant(
isValidContainer(container),
'Target container is not a DOM element.',
);
// 取root对象，一般如果非服务器端渲染这个root是不存在的
let root: Root = (container._reactRootContainer: any);
// 进入浏览器端渲染流程
if (!root) {
// 人工制造root，附加了一堆fiber的东西到_reactRootContainer
root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
container,
forceHydrate,
); if (typeof callback === 'function') {
const originalCallback = callback;
callback = function() {
// 该变callback的this为 instance
const instance = DOMRenderer.getPublicRootInstance(root._internalRoot);
originalCallback.call(instance);
};
}
DOMRenderer.unbatchedUpdates(() => {
if (parentComponent != null) {
// 向真实dom中挂载虚拟dom
root.legacy_renderSubtreeIntoContainer(
parentComponent,
children,
callback,
);
} else {
// 多么直白的语义
root.render(children, callback);
}
});
} else {
// 还是先整一下callback
if (typeof callback === 'function') {
const originalCallback = callback;
callback = function() {
const instance = DOMRenderer.getPublicRootInstance(root._internalRoot);
originalCallback.call(instance);
};
}
// 还是上面那一套
if (parentComponent != null) {
// 向root中挂载dom
root.legacy_renderSubtreeIntoContainer(
parentComponent,
children,
callback,
);
} else {
root.render(children, callback);
}
}
// 返回container 中的dom
return DOMRenderer.getPublicRootInstance(root._internalRoot);
}
通过看这个核心函数的代码，发现它其中有3个谜团：
1. _reactRootContainer 的制造：legacyCreateRootFromDOMContainer
这个函数会制造一个对象挂载到真实的dom根节点上，有了这个对象，执行该对象上的一些方法可以将虚拟dom变成dom树挂载到根节点上
2. DOMRenderer.unbatchedUpdates
它的回调执行了挂载dom结构的方法
3. root.legacy_renderSubtreeIntoContainer 和 root.render
如果有parentComponent 这个东西，就执行root.render 否则 root.legacy_renderSubtreeIntoContainer
三、跟进谜团
1.root的制造
找到 legacyCreateRootFromDOMContainer 函数：
function legacyCreateRootFromDOMContainer(
container: DOMContainer,
forceHydrate: boolean, // false
): Root {
const shouldHydrate =
forceHydrate || shouldHydrateDueToLegacyHeuristic(container);
// 是否需要服务器端渲染
if (!shouldHydrate) {
let warned = false;
let rootSibling;
while ((rootSibling = container.lastChild)) {
if (__DEV__) {
...
}
// 将dom根节点清空
container.removeChild(rootSibling);
}
}
if (__DEV__) {
...
}
const isAsync = false;
return new ReactRoot(container, isAsync, shouldHydrate);
}
我们发现实际上该函数做的只是在非ssr的情况下，将dom根节点清空，然后返回一个new ReactRoot(...)
那么重点又跑到了ReactRoot中：
// 构造函数
function ReactRoot(
container: Container, // 被清空的dom根节点
isAsync: boolean, // false
hydrate: boolean // false
) {
// 追查之后发现：createFiberRoot(containerInfo, isAsync, hydrate);
// root 实际上就和fiber有了联系
const root = DOMRenderer.createContainer(container, isAsync, hydrate);
this._internalRoot = root;
} // 原型方法 // 渲染
ReactRoot.prototype.render = function(
children: ReactNodeList,
callback: ?() => mixed,
): Work {
const root = this._internalRoot;
const work = new ReactWork();
callback = callback === undefined ? null : callback; if (callback !== null) {
work.then(callback);
}
DOMRenderer.updateContainer(children, root, null, work._onCommit);
return work;
}; // 销毁组件
ReactRoot.prototype.unmount = function(callback: ?() => mixed): Work {
...
}; ReactRoot.prototype.legacy_renderSubtreeIntoContainer = function(
parentComponent: ?React$Component<any, any>,
children: ReactNodeList,
callback: ?() => mixed,
): Work {
const root = this._internalRoot;
const work = new ReactWork();
callback = callback === undefined ? null : callback;
if (callback !== null) {
work.then(callback);
}
DOMRenderer.updateContainer(children, root, parentComponent, work._onCommit);
return work;
}; ReactRoot.prototype.createBatch = function(): Batch {
.....
};
通过以上代码我们就了解到root到底是个啥玩意儿，这个root有render等方法外，同时还附加了一个和fiber相关的 _internalRoot属性。
由此可知，不管是root.render 还是 root.legacy_renderSubtreeIntoContainer 都会去执行 DOMRenderer.updateContainer方法，无非就是传入的参数时：第三个参数传什么 而已。
2.DOMRenderer.unbatchedUpdates干了什么
// 正在批量更新标识
let isBatchingUpdates: boolean = false;
// 未批量更新标识
let isUnbatchingUpdates: boolean = false;
// 非批量更新操作
function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
// 如果正在批量更新
if (isBatchingUpdates && !isUnbatchingUpdates) {
// 未批量更新设为true
isUnbatchingUpdates = true;
try {
// 运行入参函数且返回执行结果
return fn(a);
} finally {
// 仍旧将未批量更新设为false
isUnbatchingUpdates = false;
}
}
// 不管是否在批量更新流程中，都执行入参函数
return fn(a);
}
记住这里两个十分重要的标识：isBatchingUpdates 和 isUnbatchingUpdates 初始值都是false
由此可知 unbatchedUpdates 无论如何都会执行入参函数，无非在批量更新的时候多一些流程控制。这里留坑
3. root.legacy_renderSubtreeIntoContainer 和 root.render 在弄什么？
通过上面的层层扒皮，无论怎样判断，最终都会到以上两个方法中，而这两个方法的核心就是 DOMRenderer.updateContainer，无非就是传不传父组件而已
传入的参数有： 1：虚拟dom对象树 2：之前造出来的root中和fiber相关的_internalRoot 3.父组件(null 或 父组件) 4.回调函数
export function updateContainer(
element: ReactNodeList, // 虚拟dom对象
container: OpaqueRoot, // 被制造出来的fiber root
parentComponent: ?React$Component<any, any>, // null
callback: ?Function, //没传
): ExpirationTime {
// 还记得虚拟dom对象
const current = container.current;
const currentTime = requestCurrentTime();
const expirationTime = computeExpirationForFiber(currentTime, current); // 计算优先级
return updateContainerAtExpirationTime(
element,
container,
parentComponent,
expirationTime,
callback,
);
}
// 剥皮 // 根据渲染优先级更新dom
export function updateContainerAtExpirationTime(
element: ReactNodeList, // 虚拟dom对象
container: OpaqueRoot, // 和fiber相关的_internalRoot
parentComponent: ?React$Component<any, any>, // 可有可无
expirationTime: ExpirationTime, // 计算出来的渲染优先级
callback: ?Function, // 回调函数，没有
) {
const current = container.current; if (__DEV__) {
...
}
// 获取到父组件内容
const context = getContextForSubtree(parentComponent);
// 赋值操作，不知道干啥用
if (container.context === null) {
container.context = context;
} else {
container.pendingContext = context;
}
// 又到了下一站：schedule:安排, Root: 根, Update:更新
return scheduleRootUpdate(current, element, expirationTime, callback);
}
// 剥皮 // 安排根节点更新
function scheduleRootUpdate(
current: Fiber, // fiber对象
element: ReactNodeList, // 虚拟dom树
expirationTime: ExpirationTime, // 更新优先级
callback: ?Function, // 回调
) {
if (__DEV__) {
...
}
/*
export const UpdateState = 0;
export function createUpdate(expirationTime: ExpirationTime): Update<*> {
return {
expirationTime: expirationTime, tag: UpdateState,
payload: null,
callback: null, next: null,
nextEffect: null,
};
}
*/ // 返回一个包含以上属性的update对象
const update = createUpdate(expirationTime);
// 将虚拟dom树放入payload
update.payload = {element}; callback = callback === undefined ? null : callback;
if (callback !== null) {
warningWithoutStack(
typeof callback === 'function',
'render(...): Expected the last optional `callback` argument to be a ' +
'function. Instead received: %s.',
callback,
);
update.callback = callback;
}
// 开始加入更新队列了，又得剥皮
enqueueUpdate(current, update);
//
scheduleWork(current, expirationTime);
return expirationTime;
} // 更新队列
// 核心update
export function enqueueUpdate<State>(
fiber: Fiber,
update: Update<State> // 上文那个update对象
) {
// 根据fiber的指示进行更新
...
}
根据一系列的剥皮，最终指向了enqueueUpdate 这个函数，而这个函数和fiber是紧密耦合的，fiber是一个棘手的问题，不理解fiber就无法弄清虚拟dom如何更新到真实dom中。
预知fiber如何，且听后续分晓！！！
四、本次的坑有以下几个：
1. _internalRoot 如何制造出来的，丫有什么作用，为什么后面的函数参数都传它
2. enqueueUpdate 跟fiber的关系还不清不楚
3. expirationTime 是干什么的，它的这个优先级有什么用呢？
下期解答！