创建更新的方式
- render || hydrate
- setState
- forceUpdate
render的步骤
- 创建 ReactRoot
- 创建FiberRoot RootFiber
- 创建更新
后续的是进入调度后,由调度器进行管理
- 首先ReactDOM定义
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15ReactDOM = {
render(
element: React$Element<any>,
container: DOMContainer,
callback: ?Function,
) {
return legacyRenderSubtreeIntoContainer(
null,
element,
container,
false,
callback,
)
},
} - 创建ReactRoot对象,调用render方法
调用DOMRenderer.createContainer创建FiberRoot
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27// reactDom.js
const ReactDOM: Object = {... hydrate, render...}
hydrate(element: React$Node, container: DOMContainer, callback: ?Function) {
// TODO: throw or warn if we couldn't hydrate?服务端渲染时用到
return legacyRenderSubtreeIntoContainer(
null,
element,
container,
true,
callback,
);
},
render(
element: React$Element<any>,
container: DOMContainer,
callback: ?Function,
) {
return legacyRenderSubtreeIntoContainer(
null,
element,
container,
false,
callback,
);
},
render和hydrate更新的区别在于legacyRenderSubtreeIntoContainer第四个参数
1 | function legacyRenderSubtreeIntoContainer( |
1 | root = container._reactRootContainer = legacyCreateRootFromDOMContainer( |
这里调用legacyCreateRootFromDOMContainer函数
1 | function legacyCreateRootFromDOMContainer( |
DOMRenderer的ReactFiberReconciler(与平台无关的调度调和代码),方法updateContainer参数是超时时间,expirationTime。
1 | export function updateContainer( |
- 接下来 update,赋值给Fiber.updateQueue调用scheduleWork
1 | function scheduleRootUpdate( |
创建Reactroot => FiberRoot 开始整个应用的起点
fiberRoot
1 | // root节点,render方法接收的第二个参数,顶层节点 |
Fiber
1 | // Fiber对应一个组件需要被处理或者已经处理了,一个组件可以有一个或者多个Fiber |