React 中执行的 DOM 操作

新增/插入

对于需要新增/插入的节点， React 会对 workInProgress fiber.flags 执行按位或 Placement 的操作。表示该 fiber 节点需要执行插入的操作。

执行插入的主要方法是 commitPlacement 。在该方法中会根据当前 Fiber 节点是否存在兄弟 Fiber 节点判断要调用哪种方法。

如果当前 Fiber 节点存在兄弟 Fiber 节点，则获取当前 Fiber 节点相连的兄弟 Fiber 节点对应的真实 DOM 节点，然后执行 parentInstance.insertBefore(child, beforeChild) 执行插入操作。
如果当前 Fiber 节点不存在兄弟 Fiber 节点，则获取父级 fiber 对应的真实 DOM 节点，然后执行 parentInstance.appendChild(child) 执行dom节点的插入。

更新

对于需要更新的节点， React 会对 workInProgress fiber.flags 执行按位或 Update 的操作。表示该 fiber 节点需要执行更新的操作。

React 主要会对三种属性进行处理。

• style
• dangerously_set_inner_html
• children

首先在执行completeWork方法时对于update会调用diffProperties方法分别遍历旧props和新props，接着找出变化的属性，然后组成偶数为key，奇数为value的数组，最后保存到fiber.updateQueue属性上。

在执行更新的操作时，首先会调用commitUpdate方法，最终调用updateDOMProperties方法遍历fiber.updateQueue。

• 如果key是STYLE，执行的操作是先获取到style = node.style，然后赋值 style[styleName] = styleValue
• 如果key是DANGEROUSLY_SET_INNER_HTML，执行node.innerHTML = html
• 如果key是CHILDREN，对于node是文本节点的情况，直接执行node.firstChild.nodeValue = text。否则执行node.textContent = text
• 否则是其他属性，执行node.setAttribute(attributeName, attributeValue)

删除

对于需要删除的节点，React 会将需要删除的FIber节点保存到父级Fiber节点的deletions数组中。表示这些 Fiber 节点需要执行删除的操作。

执行删除的方法是commitDeletion。首先调用commitNestedUnmounts方法从父Fiber节点递归删除所有子节点，并且还会解绑ref。对于ClassComponent会执行componentWillUnmount生命周期函数。对于FunctionComponent会执行useLayoutEffect的销毁函数。

然后再执行parentInstance.removeChild(child)方法执行dom节点的删除。