React и DOM вещи - обновление узла

React.js

нажмитеВойдите в репозиторий отладки исходного кода React.

Обновление React в конечном итоге будет реализовано на странице, поэтому в этой статье в основном объясняется обновление узла DOM (HostComponent) и текстового узла (HostText), для первого обновление — это обновление реквизита, а для последнее, обновление представляет собой обновление текстового содержимого.

commitWorkявляется записью для обновления узла.

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

  ...

  switch (primaryEffectTag) {

    ...

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

commitWork фокусируется на HostComponent и HostText.

Обновления в HostText

Обновление HostText, по сути, заключается в обновлении текстового содержимого, процесс относительно прост, окончательный вызовcommitTextUpdateустановить текстовое содержимое.

function commitWork(current: Fiber | null, finishedWork: Fiber): void {

  ...

  switch (finishedWork.tag) {
    ...
    case HostText: {
      const textInstance: TextInstance = finishedWork.stateNode;
      const newText: string = finishedWork.memoizedProps;
      const oldText: string =
        current !== null ? current.memoizedProps : newText;
      commitTextUpdate(textInstance, oldText, newText);
      return;
    }
  }
  ...
}

Обновление HostComponent

Обновление HostComponent заключается в обновлении свойств на узле волокна, что требует использования результатов сравнения свойств узла в полном процессе фазы рендеринга:fiber.updateQueue. Давайте еще раз рассмотрим его форму: массив с 2 в качестве единицы измерения, ключ с четным индексом и значение с нечетным индексом.

[ 'style', { color: 'blue' }, title, '测试标题' ]

Весь процесс обновления заключается в обходе массива и, наконец, вызовеupdateDOMPropertiesУстановите свойства и значения на узлах DOM.

function updateDOMProperties(
  domElement: Element,
  updatePayload: Array<any>,
  wasCustomComponentTag: boolean,
  isCustomComponentTag: boolean,
): void {
  // 遍历updateQueue数组，应用更新
  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);
    }
  }
}

Суммировать

Процесс обновления всего узла относительно прост, установка новых значений атрибутов или нового текстового содержимого для узла не требует других сложных операций, что проще для понимания.

Категории