React의 Diff 알고리즘은 무엇입니까? Diff 알고리즘의 전략 및 구현-JS 튜토리얼-php.cn

1. Diff 알고리즘은 무엇입니까? DOM 구조는 트리의 차이 검색 알고리즘이며 두 트리 간의 차이를 계산하는 시간 복잡도는 분명히 O(n^3)입니다. 너무 높아서 React가 이 전통적인 알고리즘을 채택하는 것은 불가능합니다. 🎜🎜#

집

웹 프론트엔드

JS 튜토리얼

React의 Diff 알고리즘은 무엇입니까? Diff 알고리즘의 전략 및 구현

不言

Sep 28, 2018 pm 05:27 PM

html html5 javascript react.js 프런트 엔드

이 글의 내용은 React의 Diff 알고리즘이 무엇인지에 관한 것입니다. Diff 알고리즘의 전략과 구현에는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. Diff 알고리즘은 무엇입니까? DOM 구조는 트리의 차이 검색 알고리즘이며 두 트리 간의 차이를 계산하는 시간 복잡도는 분명히 O(n^3)입니다. 너무 높아서 React가 이 전통적인 알고리즘을 채택하는 것은 불가능합니다. 🎜🎜#

은 세 가지 전략을 기반으로 합니다. # 🎜🎜#
교차가 거의 없습니다. 웹 UI에서 DOM 노드의 수준 이동 작업이며 무시될 수 있습니다. (트리 diff)

동일한 수준의 하위 노드 그룹의 경우 고유 ID로 구분할 수 있습니다. (요소 차이)
2. React Diff 알고리즘의 해석

우선 , 명확해야 합니다. Diff 알고리즘은 React 업데이트 단계에서만 사용됩니다. #
React Diff 알고리즘 최적화 전략 차트:
#🎜 🎜#

사용자 정의 요소 업데이트는 주로 업데이트됩니다. 렌더링된 노드를 전달하고 상점 주인은 업데이트를 관리하기 위해 렌더링된 노드의 해당 구성 요소에 이를 전달합니다.

텍스트 노드 업데이트는 매우 간단합니다. 복사본을 직접 업데이트하면 됩니다.
브라우저의 기본 요소 업데이트는 두 부분으로 나뉩니다:

React의 Diff 알고리즘은 무엇입니까? Diff 알고리즘의 전략 및 구현 자식 노드 업데이트는 주로 차이점 개체를 찾을 때 위의 shouldUpdateReactComponent를 사용하여 판단합니다. 즉, 직접 업데이트할 수 있으며 하위 노드의 업데이트를 재귀적으로 호출하고 차이 개체도 재귀적으로 검색합니다. 이전 개체를 삭제하거나 새 개체를 추가하면 직접 업데이트할 수 없습니다. 그런 다음 차이 개체를 기반으로 DOM 요소(위치 변경, 삭제, 추가 등)를 작동합니다.

React의 Diff 알고리즘은 무엇입니까? Diff 알고리즘의 전략 및 구현

1. 텍스트 유형

 ReactDOMTextComponent.prototype.receiveComponent(nextText, transaction) {
    //与之前保存的字符串比较
    if (nextText !== this._currentElement) {
      this._currentElement = nextText;
      var nextStringText = '' + nextText;
      if (nextStringText !== this._stringText) {
        this._stringText = nextStringText;
        var commentNodes = this.getHostNode();
        // 替换文本元素
        DOMChildrenOperations.replaceDelimitedText(
          commentNodes[0],
          commentNodes[1],
          nextStringText
        );
      }
    }
  }

로그인 후 복사

2 사용자 정의 구성 요소의 경우:

class Tab extends Component {
    constructor(props) {
        super(props);
        this.state = {
            index: 1,
        }
    }
    shouldComponentUpdate() {
        ....
    }
    render() {
        return (
            <p>
                </p><p>item1</p>
                <p>item1</p>
            
        )
    }
    
}

로그인 후 복사

#🎜🎜 #명확해야 합니다. 컴포넌트로서 컴포넌트는 단지 Html 구조의 패키징 컨테이너일 뿐이며 이 Html 구조의 상태를 관리할 수 있는 기능이 있습니다. 핵심은 반환된 Html 구조입니다. render 함수에 의해 호출되는 Tab 클래스는 이 Html 구조의 패키징 컨테이너입니다(패키징 상자로 이해될 수 있음).

#🎜🎜 #에서 볼 수 있듯이 React 렌더링 메커니즘 다이어그램에서 사용자 정의 구성 요소는 최종적으로 React Diff 최적화 전략 1과 결합됩니다(서로 다른 클래스의 두 구성 요소가 서로 다른 구조를 가짐)
3. 기본 요소:

ReactDOMComponent.prototype.receiveComponent = function(nextElement, transaction, context) {
    var prevElement = this._currentElement;
    this._currentElement = nextElement;
    this.updateComponent(transaction, prevElement, nextElement, context);
}

ReactDOMComponent.prototype.updateComponent = function(transaction, prevElement, nextElement, context) {
    //需要单独的更新属性
    this._updateDOMProperties(lastProps, nextProps, transaction, isCustomComponentTag);
    //再更新子节点
    this._updateDOMChildren(
      lastProps,
      nextProps,
      transaction,
      context
    );

    // ......
}

로그인 후 복사

diff 알고리즘은 this._updateDOMChildren 메서드 내에서 호출됩니다.

3. React에서 Diff 알고리즘 구현

_updateChildren: function(nextNestedChildrenElements, transaction, context) {
    var prevChildren = this._renderedChildren;
    var removedNodes = {};
    var mountImages = [];

    // 获取新的子元素数组
    var nextChildren = this._reconcilerUpdateChildren(
      prevChildren,
      nextNestedChildrenElements,
      mountImages,
      removedNodes,
      transaction,
      context
    );

    if (!nextChildren && !prevChildren) {
      return;
    }

    var updates = null;
    var name;
    var nextIndex = 0;
    var lastIndex = 0;
    var nextMountIndex = 0;
    var lastPlacedNode = null;

    for (name in nextChildren) {
      if (!nextChildren.hasOwnProperty(name)) {
        continue;
      }
      var prevChild = prevChildren && prevChildren[name];
      var nextChild = nextChildren[name];
      if (prevChild === nextChild) {
        // 同一个引用，说明是使用的同一个component,所以我们需要做移动的操作
        // 移动已有的子节点
        // NOTICE：这里根据nextIndex, lastIndex决定是否移动
        updates = enqueue(
          updates,
          this.moveChild(prevChild, lastPlacedNode, nextIndex, lastIndex)
        );

        // 更新lastIndex
        lastIndex = Math.max(prevChild._mountIndex, lastIndex);
        // 更新component的.mountIndex属性
        prevChild._mountIndex = nextIndex;

      } else {
        if (prevChild) {
          // 更新lastIndex
          lastIndex = Math.max(prevChild._mountIndex, lastIndex);
        }

        // 添加新的子节点在指定的位置上
        updates = enqueue(
          updates,
          this._mountChildAtIndex(
            nextChild,
            mountImages[nextMountIndex],
            lastPlacedNode,
            nextIndex,
            transaction,
            context
          )
        );


        nextMountIndex++;
      }

      // 更新nextIndex
      nextIndex++;
      lastPlacedNode = ReactReconciler.getHostNode(nextChild);
    }

    // 移除掉不存在的旧子节点，和旧子节点和新子节点不同的旧子节点
    for (name in removedNodes) {
      if (removedNodes.hasOwnProperty(name)) {
        updates = enqueue(
          updates,
          this._unmountChild(prevChildren[name], removedNodes[name])
        );
      }
    }
  }

로그인 후 복사

4. Diff를 기반으로 한 개발 제안