Click on the React source debug repository.

React updates are finally implemented on the page, so this article mainly introduces updates of DOM node (HostComponent) and text node (HostText). For the former, updates are updates of props, while for the latter, updates are updates of text content.

CommitWork is the entry point for node updates.

function commitMutationEffectsImpl(fiber: Fiber, root: FiberRoot, renderPriorityLevel,) {...switch (primaryEffectTag) {

    ...

    case Update: {
      const current = fiber.alternate;
      commitWork(current, fiber);
      break; }}}Copy the code

CommitWork focuses on HostComponent and HostText.

The renewal of the HostText

Updating HostText, which is actually updating the text content, is a simple process, and ultimately calls commitTextUpdate to set the text content.

function commitWork(current: Fiber | null, finishedWork: Fiber) :void {...switch (finishedWork.tag) {
    ...
    case HostText: {
      const textInstance: TextInstance = finishedWork.stateNode;
      const newText: string = finishedWork.memoizedProps;
      constoldText: string = current ! = =null ? current.memoizedProps : newText;
      commitTextUpdate(textInstance, oldText, newText);
      return; }}... }Copy the code

The renewal of the HostComponent

Update HostComponent is to update the props on the Fiber node, using the diff result of the node props in the Complete process of the Render phase: fiber. UpdateQueue. Let’s review the form again: array, in units of 2, index even keys, and odd values.

['style', {color: 'blue'}, title, 'test title']Copy the code

The entire update process iterates through the array, culminating in a call to updateDOMProperties to set the properties and values to the DOM node.

function updateDOMProperties(
  domElement: Element,
  updatePayload: Array<any>,
  wasCustomComponentTag: boolean,
  isCustomComponentTag: boolean,
) :void {
  // Iterate through the updateQueue array to apply the update
  for (let i = 0; i < updatePayload.length; i += 2) {
    const propKey = updatePayload[i];
    const propValue = updatePayload[i + 1];
    if (propKey === STYLE) {
      setValueForStyles(domElement, propValue);
    } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
      setInnerHTML(domElement, propValue);
    } else if (propKey === CHILDREN) {
      setTextContent(domElement, propValue);
    } else{ setValueForProperty(domElement, propKey, propValue, isCustomComponentTag); }}}Copy the code

conclusion

The whole node update process is relatively simple, the new attribute value or new text content is set to the node, does not involve other complex operations, easy to understand.