반응-비동기 실행 스케줄링의 핵심 설계 원칙 분석

JS는 보통 싱글스레드 환경에서 실행되기 때문에 시간이 많이 걸리는 코드를 만나면 가장 먼저 생각하는 것이 작업을 중단할 수 있도록 분할하고, 동시에 다른 작업이 도착하면 실행권한을 포기하는 것입니다. 실행 후 나머지 계산은 이전에 중단된 부분부터 비동기적으로 수행됩니다. 따라서 핵심은 비동기적이고 중단 가능한 솔루션을 구현하는 것입니다. 그렇다면 작업 분할, 비동기 실행 기능이 있고 실행 권한도 포기할 수 있는 솔루션을 어떻게 구현할까요? React는 이에 상응하는 솔루션을 제공합니다.

배경

React는 인스타그램 웹사이트를 구축하기 위한 Facebook 내부 프로젝트로 시작되었으며 2013년 5월에 오픈 소스로 공개되었습니다. 프레임워크는 주로 사용자 인터페이스 구축을 위한 JavaScript 라이브러리로, 당시 양방향 데이터 바인딩의 프런트엔드 세계에서는 고유했습니다. 더욱 독특한 점은 페이지 새로 고침에 부분 새로 고침 메커니즘을 도입했다는 것입니다. 많은 장점이 있는데, 정리하면 React의 주요 특징은 다음과 같습니다.

1. 1 변환

프레임워크는 UI가 관계 매핑을 통해서만 데이터를 다른 형태의 데이터로 변환한다고 믿습니다. 동일한 입력에는 동일한 출력이 있어야 합니다. 이것은 순수한 기능입니다.

1.2 추상화

실제 시나리오에서는 복잡한 UI를 구현하는 데 하나의 기능만 필요합니다. 중요한 것은 내부 세부 사항을 숨기기 위해 UI를 여러 기능으로 추상화해야 한다는 것입니다. 한 함수 내에서 다른 함수를 호출하여 복잡한 사용자 인터페이스를 구현하는 것을 추상화라고 합니다.

1.3 조합

재사용성을 달성하기 위해 각 조합은 해당 항목에 대한 새 컨테이너만 생성합니다. 또한 "다른 추상 컨테이너를 다시 결합"해야 합니다. 즉, 두 개 이상의 컨테이너를 결합해야 합니다. 다양한 추상화가 하나로 병합됩니다.

React의 핵심 가치항상 목표를 중심으로 이루어집니다.업데이트이 사항은 업데이트됩니다. 이를 최고의 사용자 경험과 결합하는 것이 React 팀이 열심히 노력해 온 것입니다.

느린 ==>업그레이드

애플리케이션이 점점 더 복잡해짐에 따라 React15 아키텍처에서는 dom diff 시간이 16.6ms를 초과하면 페이지가 정지될 수 있습니다. 따라서 반응을 느리게 만들고 리팩터링이 필요한 요인은 무엇입니까?

React15 이전 버전에서는 조정 프로세스가 동기식(스택 조정자라고도 함)이었고, js 실행이 단일 스레드였기 때문에 더 많은 시간이 소요되는 작업을 업데이트할 때 우선순위가 높은 일부 작업에 적시에 응답할 수 없었습니다. , 예를 들어 사용자는 시간이 많이 걸리는 작업을 처리하는 동안 페이지에 입력할 때 지연을 경험할 수 있습니다. 페이지 정지의 원인은 과도한 CPU 사용량으로 인해 발생하는 경우가 많습니다. 예를 들어 React 컴포넌트를 렌더링하거나 네트워크 요청을 하거나 함수를 실행할 때 CPU를 차지하게 됩니다. CPU 사용량이 너무 높으면 페이지 정지 현상이 발생합니다. 막히는 느낌. 이 문제를 해결하는 방법?

일상적인 개발에서 JS는 대개 싱글 스레드 환경에서 실행되는데, 시간이 많이 걸리는 코드를 만날 때 가장 먼저 생각하는 것은 작업을 중단할 수 있도록 분할하고, 동시에 다른 작업이 발생하면 도착, 실행 권한을 포기하고 다른 작업이 실행될 때 나머지 계산은 이전에 중단된 부분에서 비동기적으로 실행됩니다. 따라서 핵심은 비동기적이고 중단 가능한 솔루션을 구현하는 것입니다.

그렇다면 작업 분할, 비동기 실행 및 기능을 갖춘 메소드를 어떻게 구현할까요? 권리행사 솔루션. React는 이에 상응하는 솔루션을 제공합니다.

2.1 업무분할

단일 스레드에서 분할된 작업을 실행하는 방법, 특히 React15에서 업데이트 프로세스는 동기식이며 임의로 분할할 수 없으므로 React는 실제 DOM을 매핑하고 분할 단위 역할도 할 수 있는 일련의 데이터 구조를 제공합니다. . 이것이 우리 Fiber로 이어집니다.

섬유

Fiber는 React에서 가장 작은 작업 단위입니다. React에서는 모든 것이 구성 요소입니다. HTML 페이지에서는 함께 통합된 여러 DOM 요소를 구성 요소라고 할 수 있으며, HTML 태그는 구성 요소(HostComponent)가 될 수 있고 일반 텍스트 노드도 구성 요소(HostText)가 될 수 있습니다. 각 구성 요소는 광섬유 노드에 해당합니다. 많은 광섬유 노드가 중첩되고 서로 연결되어 섬유 트리( 링크드 리스트 구조를 사용하는 이유: 링크드 리스트 구조는 시간과 공간을 교환하는 구조이고, 삽입 및 삭제 작업의 성능이 매우 좋기 때문입니다.), Fiber 트리와 Fiber 트리의 관계와 마찬가지로 아래에 표현된 DOM:

Fiber树 DOM树

   div#root div#root
      | |
    <App/> div
      | / \
     div p a
    / ↖
   / ↖
  p ----> <Child/>
             |
             a

DOM 노드는 Fiber 노드에 연결되어야 하지만 Fiber 노드에는 일치하는 DOM 노드가 있습니다. 작동 단위인 섬유의 구조는 다음과 같습니다.

export type Fiber = {
   
    
    
  // 识别 fiber 类型的标签。
  tag: TypeOfWork,

  // child 的唯一标识符。
  key: null | string,

  // 元素的值。类型，用于在协调 child 的过程中保存身份。
  elementType: any,

  // 与该 fiber 相关的已解决的 function / class。
  type: any,

  // 与该 fiber 相关的当前状态。
  stateNode: any,

  // fiber 剩余的字段

  // 处理完这个问题后要返回的 fiber。
  // 这实际上就是 parent。
  // 它在概念上与堆栈帧的返回地址相同。
  return: Fiber | null,

  // 单链表树结构。
  child: Fiber | null,
  sibling: Fiber | null,
  index: number,

  // 最后一次用到连接该节点的引用。
  ref:
    | null