React Internals-React 15까지 알고리즘 조정

이 시리즈의 주제는 이 주제를 이해하는 선결 조건이다.그것은 당신에게 본문에서 광범위하게 사용될 용어와 개념을 소개합니다.나는 또한 본문을 작성하는 진일보한 읽기 자원,React 문서와 출처에 연결할 것이다.나는 가능한 한 행화를 줄이고, 가능한 한 용어의 함의를 제공할 것이다

복습하다.

대장

React의 diffing 알고리즘은 트리의 어떤 부분이 변경되었는지 확인하는 데 사용됩니다

DOM

DOM 또는 문서 객체 모델은 사용되는 트리 데이터 구조입니다.
브라우저를 통해트리 데이터 구조의 UI 표현입니다.

차분 알고리즘의 귀속성

언제든지 React 요소 트리의 render() 함수를 되돌려받을 수 있습니다.

var elementTree = render(a);

예컨대.이 구성 요소를 보십시오:

class HashSign extends React.Component {
    render() {
        return <span>#</span>
    }
}

class HashTag extends React.Component {
    render() {
        return (
            <div className="row">
                <HashSign/>
                <b>React</b>
            </div>
        )
    }
}

React에서 UI를 렌더링하기 시작하면 먼저 HashTag 구성 요소의 렌더링 함수를 호출합니다.그리고 HashSign 와 b 표시된 렌더링 함수를 호출합니다.이렇게 하면 다음과 같은 요소 트리가 생성됩니다(요소 목록은 체인 테이블로 저장됨).

{
    type: "div",
    className: "row",
    props: {
        children: [
            {
                type: "span",
                children: "#"
            },
            {
                type: "b",
                children: "React"
            }
        ]
    }
}

도구나 상태가 변경되면 React는 실제 DOM을 업데이트해야 합니다.다음 업데이트에서 render() 함수는 서로 다른 React 요소 트리를 생성합니다.
이제 리액션은 어떤 변화가 일어났는지 찾아내고 늙은 나무를 새 나무로 바꾸는 데 필요한 최소 변화수를 찾아야 한다.
이러한 전환의 간단한 실현의 복잡성은 O(n3)이지만 React는 두 가지 가설을 바탕으로 계발식 O(n) 알고리즘을 실현했다.

서로 다른 type 아이템을 가진 두 원소는 서로 다른 나무를 생성한다.React는 이 두 나무를 구분하지 않고 늙은 나무를 완전히 교체한다

key 주어진 부품에 대한 아이템은 안정적이고 예측 가능하며 독특하다.React는 이 키를 사용하여 목록을 구분합니다. (따라서 목록을 표시할 때 컨트롤에 키와 관련된 경고가 나타납니다.)

**계발식*기술이나 계발식은 문제를 해결하거나 스스로 발견하는 모든 방법으로 실용적인 방법이 가장 우수하고 완벽하거나 합리적이라고 보장할 수 없지만 즉각적이고 단기적인 목표나 근사치에 도달할 수 있다.위키백과*
주의: 나는 앞의 문장에서 원소의 type 속성을 해석했다

확산 알고리즘 자체

React가 두 그루의 나무를 확산하기 시작했을 때, 그것은 뿌리 원소로부터 나무를 비교하기 시작했다.다음과 같은 몇 가지 가능성이 있습니다.

1. 원소는 서로 다른 유형이 있다

루트 요소의 type 속성이 일치하지 않으면 React는 오래된 하위 트리를 제거하고 처음부터 새 하위 트리를 구축합니다.이전 서브트리가 파괴되면 이전 DOM 노드가 DOM에서 제거되어야 합니다.새 서브트리를 구성할 때 DOM에 새 요소가 삽입됩니다.옛 하위 트리와 관련된 모든 상태를 잃어버립니다.
루트와 연관된 모든 요소가 제거되고 상태가 제거됩니다.예컨대

<div>
    <p>Hello World!</p>
</div>

<span>
    <p>Hello World!</p>
</span>

이것은 p 표시된 옛 실례를 없애고 새 실례를 만들 것입니다

2. 요소 유형 동일

같은 유형의 React DOM 요소 두 개를 비교할 때 React는 요소의 속성을 보고 변경된 속성만 업데이트합니다.예컨대

<div className="before" title="stuff" />

<div className="after" title="stuff" />

React는 기본 DOM 노드의 클래스 이름만 수정합니다.

3. 목록의 요소

React는 두 목록의 요소를 동시에 교체하고 필요할 때 변경합니다.원소가 목록의 끝에 추가되었을 때, 이 방법은 유효하다.예를 들면 다음과 같습니다.

<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

여기서 React first는 두 목록의 첫 번째 요소를 비교합니다.변경 사항이 없는 것을 보고 두 번째 요소로 이동합니다.그리고 두 목록의 두 번째 요소를 비교해 보니 변경할 것이 없었다.그리고 원소가 새 목록에 삽입되어 필요한 변경을 하는 것을 보았습니다.
목록의 시작 부분에 요소를 삽입하면 성능이 좋지 않을 수 있습니다.예를 들면 다음과 같습니다.

<ul>
  <li>Mumbai</li>
  <li>Banglore</li>
</ul>

<ul>
  <li>Hyderabad</li>
  <li>Mumbai</li>
  <li>Banglore</li>
</ul>

React는 내부 텍스트가 변경되었기 때문에 이전 목록을 삭제하고 처음부터 새 목록을 만듭니다.
이것이 바로 Mumbai 도구가 구세주가 된 곳이다.

<ul>
  <li key="2018">Mumbai</li>
  <li key="2019">Banglore</li>
</ul>

<ul>
  <li key="2017">Hyderabad</li>
  <li key="2018">Mumbai</li>
  <li key="2019">Banglore</li>
</ul>

원소에 키가 있을 때, React는 키를 사용하여 낡은 트리의 원소를 새 트리의 원소와 일치시킵니다.그것은 Hyderabad 목록에 삽입되었고, 다른 두 요소가 방금 이동되었다는 것을 안다.
Further Reading
또한 작가React Armory의 이 훌륭한 문장을 보십시오

이런 방법의 문제는

상술한 알고리즘은 순전히 귀속된 것이다.key를 호출할 때, 모든 업데이트는 하위 트리를 즉시 다시 정렬할 수 있습니다.이런 방법에는 한계가 있다.

모든 업데이트가 동일한 것은 아닙니다.

사용자 인터페이스의 업데이트는 데이터 저장의 변경보다 우선되어야 한다.그렇지 않으면 사용자 인터페이스에서 사용하기가 매우 느리다고 느낄 수 있다.
대부분의 응용 프로그램에는 상당히 큰 원소 트리가 있는데, 트리의 비교적 높은 원소를 업데이트하면 전체 하위 트리의 이름을 다시 짓는다.이 하위 트리가 크면 프레임 속도가 떨어질 수 있습니다.
현재 대부분의 컴퓨터의 갱신률이 60Hz보다 높다는 것은 화면이 초당 적어도 60번 갱신되었다는 것을 의미한다.ReactHyderabad가 생성됩니다.제한된 시간 동안, React는 이 두 개의 하위 트리를 구분하고, 실제 DOM에 변경 사항을 적용해야 한다. (이것은 느린 작업이다.)또한 브라우저는 다른 작업을 동시에 수행해야 합니다.이 시간에 예산을 다 쓰면 화면이 떨어지고 화면이 불안해진다.
이 문제를 해결하기 위해 React팀은 조율 알고리즘을 처음부터 다시 썼고 요소를 업데이트하는 직관적인 방법을 찾았다.이 새 알고리즘은 광섬유라고 불리며 2016년 이후 계속 사용되고 있다.나는 이 시리즈의 다음 글에서 광섬유를 소개할 것이다.

마무리

우리는 React 15 이전에 사용한 조화 알고리즘이 어떻게 원소를 점차적으로 나타내는지 보았다.우리도 알고리즘의 한계성을 보았다.
이 시리즈의 다음 글에서 나는 광섬유 조절 엔진을 소개할 것이다.섬유는 최초로 16년에 도입되었다.가상 DOM의 증가분 렌더링을 지원하는 방법도 설명합니다.

도구책

https://reactjs.org/docs/reconciliation.html

GitHub - reactjs/react-basic: A description of the conceptual model of React without implementation burden.

이 시리즈의 다음 글에서, 나는 React 16이 사용하는 새로운 조절 엔진을 소개할 것이다.Dev에서 업데이트를 받으려면 나를 팔로우 또는 구독하십시오newsletter.
하면, 만약, 만약...