광섬유 구조

복습하다.
화해하다
React의 diffing 알고리즘은 트리의 어떤 부분이 변경되었는지 확인하는 데 사용됩니다
도모
DOM 또는 문서 객체 모델은 브라우저에서 사용하는 트리 데이터 구조입니다.트리 데이터 구조의 UI 표현입니다.
스택 조절기
React 15 릴리즈까지 계산법의 이전 구현
섬유질
React 16에 도입된 새로운 조절 알고리즘
원소.
요소는 화면에 표시할 DOM 노드나 다른 구성 요소를 설명하는 간단한 객체입니다.원소는 그 도구에 다른 원소를 포함할 수 있다.React 요소를 만드는 것은 매우 저렴합니다.일단 원소가 생성되면, 그것은 영원히 변하지 않을 것이다.
화해와 과장
React는 안드로이드와 iOS의 DOM과 본체 보기를 포함하여 많은 목표를 렌더링할 수 있습니다.조정자는 트리의 어떤 부분이 변경되었는지 계산하고 렌더기는 이 정보를 사용하여 UI를 업데이트합니다
Fiber는 렌더링과 상관없이 조정기를 다시 구현했습니다.

React의 스케줄링
창고 조율기가 구성 요소의 렌더링 함수를 호출할 때, 하위 구성 요소의 렌더링 함수는 귀속적으로 호출됩니다.모든 처리는 똑딱거리는 소리 속에서 이루어진다.사용자 인터페이스의 변화 속도가 프레임 속도보다 빠르면 프레임이 떨어질 수 있습니다.
기억해야 할 사항은 다음과 같습니다.

은 UI에서 각 업데이트를 즉시 적용할 필요가 없습니다.

애니메이션 또는 데이터 저장소 업데이트에 따라 업데이트 유형에 따라 우선 순위가 달라집니다.

나는 네가 스케줄에 관한 이 부분인 https://reactjs.org/docs/design-principles.html#scheduling을 자세히 읽는 것을 건의한다
그것은 React와 다른 라이브러리의 스케줄링 작업의 차이점을 설명했다

왜 이런 새로운 구조가 필요합니까?
작업 방식의 원인으로 인해 창고 조율기에 약간의 제한이 있다.매번 업데이트할 때마다 즉시 적용됩니다. 왜냐하면 알고리즘은 순귀속이기 때문입니다.DOM이 커지면 업데이트가 더 비싸지고 프레임이 손실될 수 있습니다.
또한 UI 업데이트는 데이터 저장소 업데이트보다 우선 순위가 높아야 합니다.그렇지 않으면 애니메이션이 지연될 수 있습니다.스택 조정기는 업데이트를 구분하지 않습니다.
파이버의 주요 목표는 리액트가 스케줄링을 이용할 수 있도록 하는 것이다.React는 다음과 같은 기능을 필요로 합니다.

일시 중지 후

은 유형별 작업 할당 우선 순위

재사용 이전 작업

더 이상 필요하지 않을 경우 업무 중단

섬유란 무엇입니까?

A lot of stuff in this section is picked up from Andrew Clark's Notes. I am trying to make them as simple to understand as possible. You can always refer to the original notes

단일 광섬유 (소문자는 고의적) 는 구성 요소, 입력, 출력에 대한 정보를 포함하는 자바스크립트 대상이다.Fibre 아키텍처는 React를 위한 스택의 재구현입니다.
광섬유 대상 중의 몇 가지 중요한 특성

type 및 key

이러한 속성의 작용은 원소에 대한 작용과 같다.요소에서 새 Fibre을 생성하면 이러한 속성이 복제됩니다.
광섬유의 type은 그것이 어떤 요소인지 정의한다(예를 들어 div, span).type 속성은 호스트 구성 요소의 문자열이며 복합 구성 요소의 함수나 클래스입니다.

child 및 sibling

이 속성들은 다른 광섬유를 가리키고 광섬유 귀속 트리 구조의 방향을 가리킨다child 옵티컬은 구성 요소의 render 함수에서 반환되는 값입니다.

  function Parent() {
    return <Child />
  }

child의 Parent 필드는 Child에 해당합니다.
동급 필드는 render 함수에서 원소 그룹을 되돌려주는 데 사용됩니다

  function Parent() {
    return [<Child1 />, <Child2 />]
  }

형제자매는 하나의 체인 시계를 형성하는데, 그 머리는 첫 번째 아이이다.

return

return 옵티컬은 컨트롤러가 현재 옵티컬을 처리한 후 반환하는 옵티컬입니다.그것도 모섬유로 여겨질 수 있다
만약 광섬유에 여러 개의 자광섬유가 있다면, 모든 자광섬유의 되돌아오는 광섬유는 모두 부광섬유이다.

pendingProps 및 memoizedProps

도구를 렌더링 함수의 매개변수로 볼 수 있습니다.파이버의 pendingProps은 실행 시작 시, memoizedProps은 실행 종료 시로 설정됩니다.pendingProps이 memoizedProps과 같을 때, 이것은 이전의 출력을 다시 사용할 수 있음을 의미한다

pendingWorkPriority

이것은 업무 우선순위의 지표다.여기서 더 작은 숫자는 더 높은 우선순위를 의미한다(pendingWorkPriority = 0은 NoWork)

output

각 파이버에는 출력이 있지만 리프 노드에서만 생성되며 구성요소는 div, span 등(React Native의 경우 View, Text 등)입니다.출력을 트리로 전송합니다.
결과적으로 변경 사항을 화면에 렌더링할 수 있도록 렌더링자에게 출력이 제공됩니다.렌더기는 출력을 작성하고 업데이트하는 방법을 정의합니다.

한층 더 읽다

Andrew Clark's Notes

Fiber Principles - 이것은 매우 초기의 Github 문제이기 때문에 많은 실현 세부 사항이

으로 바뀌었을 수 있다