React 源码漂流记：React 调和器核心源码解读（十）
标签： React17精简
# 目录
# 前言
在上文中，我们探讨了 mutation 过程中 EffectTag List 对 DOM 操作的影响，包括向 DOM 提交删除、置位、更新等操作。实际上这里讲 DOM 比较片面，因为 React 所支持的 HOST 环境包括 DOM, canvas, console、nodejs 等，而 DOM 只是其中最常用的一项而已。
React 中针对每个 HOST 运行环境（renderer）提供 HostConfig 的概念， HostConfig 提供了节点的具体的操作能力，不仅仅限于 DOM 环境。React 官方给出如下定义：
提示
A "host config" is an object that you need to provide, and that describes how to make something happen in the "host" environment (e.g. DOM, canvas, console, native, or whatever your rendering target is).
在本文中我们以 DOM 环境为例，描述前文出现的节点操作的具体原理。
# removeChild
此函数删除节点。
function removeChild(
parentInstance: Instance,
child: Instance | TextInstance | SuspenseInstance,
): void {
parentInstance.removeChild(child);
}
1
2
3
4
5
6
2
3
4
5
6
# insertBefore
此函数在指定节点之前插入节点。
function insertBefore(
parentInstance: Instance,
child: Instance | TextInstance,
beforeChild: Instance | TextInstance | SuspenseInstance,
): void {
parentInstance.insertBefore(child, beforeChild);
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# appendChild
此函数在节点末尾追加节点。
function appendChild(
parentInstance: Instance,
child: Instance | TextInstance,
): void {
parentInstance.appendChild(child);
}
1
2
3
4
5
6
2
3
4
5
6
# commitTextUpdate
此函数更新文本节点的内容。
function commitTextUpdate(
textInstance: TextInstance,
oldText: string,
newText: string,
): void {
textInstance.nodeValue = newText;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# commitUpdate
此函数更新非文本节点的属性和内容。
function commitUpdate(
domElement: Instance,
updatePayload: Array<mixed>,
type: string,
oldProps: Props,
newProps: Props,
internalInstanceHandle: Object,
): void {
// src/react/packages/react-dom/src/client/ReactDOMComponent.js
// Apply the diff to the DOM node.
updateProperties(domElement, updatePayload, type, oldProps, newProps);
// Update the props handle so that we know which props are the ones with
// with current event handlers.
updateFiberProps(domElement, newProps);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 扩展
# 问题
# 总结
# 参考
编辑 (opens new window)
上次更新: 2022/08/09, 20:11:40