React의 Hooks는 Fiber 이후에 등장한 기능이므로 Hooks가 반드시 Fiber에 의존하여 구현되어야 한다고 잘못 생각하는 사람들이 많습니다. 실제로 두 가지가 반드시 연결되어 있는 것은 아닙니다.
이제 후크는 React뿐만 아니라 preact, React ssr 및 Midway와 같은 프레임워크에서도 구현됩니다.
이러한 다양한 프레임워크의 후크가 어떻게 구현되는지 살펴보겠습니다.
React는 jsx를 통해 인터페이스를 설명합니다. jsx는 babel 또는 tsc와 같은 컴파일 도구를 통해 렌더링 함수로 컴파일된 다음 vdom을 생성하기 위해 실행됩니다.
여기서 렌더링 함수는 React17 이전의 React.createElement였습니다.
React 17 이후에는 jsx로 변경되었습니다.
이 jsx-runtime은 자동으로 도입되며 이전처럼 각 구성 요소에 대해 React 가져오기를 유지할 필요가 없습니다.
렌더링 함수 실행은 vdom을 생성합니다.
vdom의 구조는 다음과 같습니다.
React16 이전에는 이 vdom이 실제 dom을 추가, 삭제, 수정하면서 반복적으로 렌더링되었습니다.
React16이 파이버 아키텍처를 도입한 후에는 추가 단계가 있었습니다. 먼저 vdom을 파이버로 변환한 다음 파이버를 렌더링하는 것입니다.
vdom을 Fiber로 변환하는 과정을 reconcile이라고 하며, 실제 dom을 추가, 삭제, 수정하는 마지막 과정을 commit이라고 합니다.
왜 우리는 그러한 전환을 해야 합니까?
vdom에는 하위 노드에 대한 참조만 있고 상위 노드 상위 및 기타 형제 노드에 대한 참조가 없기 때문에 중단 없이 한 번에 모든 vdom 노드를 dom에 재귀적으로 렌더링해야 합니다.
중단되면 어떻게 되나요? 상위 노드와 형제 노드는 기록되지 않으므로 하위 노드만 계속 처리할 수 있지만 vdom의 다른 부분은 처리할 수 없습니다.
그렇기 때문에 React는 중단 및 복구 후에 처리되지 않은 모든 노드를 찾을 수 있기 때문에 중단될 수 있는 부모 노드 반환, 자식 노드 자식, 형제 노드 형제 등과 같은 참조가 있는 이러한 종류의 파이버 구조를 도입했습니다.
파이버 노드의 구조는 다음과 같습니다.
이 프로세스는 중단될 수 있으며 자연스럽게 예약될 수 있는데, 이것이 스케줄 프로세스입니다.
따라서 Fiber 아키텍처는 Schdule, Reconcile(vdom을 Fiber로 변환), Commit(dom으로 업데이트)의 세 단계로 나뉩니다.
일부 값에 액세스하기 위해 함수 구성 요소에서 후크를 사용할 수 있으며 이러한 값은 파이버 노드에 저장됩니다.
예를 들어, 이 함수 구성요소에는 6개의 후크가 사용됩니다.
그런 다음 해당 파이버 노드에 6개 요소의 memorizedState 연결 목록이 있습니다.
다음으로 연결됨:
memorizedState 연결 목록의 다양한 요소에 대한 서로 다른 후크 액세스 값이 이것이 반응 후크의 원리입니다.
이 연결 목록에는 생성 단계와 업데이트 단계가 있으므로 useXxx의 최종 구현이 mountXxx와 updateXxx로 나누어져 있음을 알 수 있습니다.
여기서 마운트 단계는 후크 노드를 생성하고 이를 연결 목록으로 조합하는 것입니다.
생성된 후크 연결 목록은 파이버 노드의 memorizedState 속성에 연결됩니다.
업데이트할 때 Fiber 노드에서 이 후크 목록을 자연스럽게 검색할 수 있습니다.
이러한 방식으로 여러 렌더링에서 useXxx API는 파이버 노드에서 해당 memorizedState를 찾을 수 있습니다.
이것이 반응 후크의 원리입니다. 파이버 노드에 후크를 저장하는 것을 볼 수 있습니다.
그렇다면 preact와의 차이점은 무엇입니까?
Preact는 React 코드와 호환되는 보다 가벼운 프레임워크이며 클래스 구성 요소 및 함수 구성 요소는 물론 후크와 같은 반응 기능도 지원합니다. 그러나 파이버 아키텍처를 구현하지 않습니다.
왜냐하면 궁극적인 성능이 아닌 궁극적인 크기(단 3kb)를 주로 고려하기 때문입니다.
우리는 방금 React가 Fiber 노드에 Hook List를 저장한다는 것을 배웠습니다. Preact에 Fiber 노드가 없으면 Hook List는 어디에 저장됩니까?
사실, Fiber는 성능 향상을 위해 vdom만 수정한다고 생각하기 쉬우며, vdom과 본질적인 차이는 없습니다. 그렇다면 그냥 vdom에 후크를 저장할 수 있을까요?
실제로 preact는 후크 목록을 vdom에 배치합니다.
예를 들어, 이 함수 구성 요소에는 4개의 후크가 있습니다.
구현은 vdom의 해당 후크에 액세스하는 것입니다.
React처럼 후크를 마운트와 업데이트의 두 단계로 나누지 않고 처리를 위해 병합합니다.
그림에서 볼 수 있듯이, component.__hooks 배열에 후크를 저장하고 아래 첨자를 통해 액세스합니다.
이 구성요소는 vdom의 속성입니다.
즉, Hooks의 값은 vnode._comComponent._hooks 배열에 저장됩니다.
후크 구현 시 React와 preact의 차이점을 비교하세요.
React에서는 후크 목록이 FiberNode.memorizedState 속성에 저장되고, 사전에서는 후크 목록이 vnode._comComponent._hooks 속성에 저장됩니다
. through next, in preact Hook Linked List는 배열입니다.
React는 subscript access를 통해 Hook Linked List의 생성과 업데이트를 분리하여
Hooks의 구현은 Fiber에 의존하지 않으며, 단지 컴포넌트에 해당하는 Hook 데이터를 저장할 장소를 찾으면 됩니다.
vdom, Fiber 및 구성 요소 렌더링은 밀접하게 관련되어 있으므로 이러한 구조에 저장됩니다.
예를 들어, 반응 ssr이 후크를 구현하면 파이버나 vdom에도 존재하지 않습니다.
실제로 csr 외에도 React-dom 패키지는 ssr을 수행할 수도 있습니다.
반응의 렌더링 방법을 사용합니다. CSR일 때 돔:
ssr인 경우, React-dom/server의 renderToString 메소드나 renderToStream 메소드를 사용하세요:
ssr 중에 vdom에서 Fiber로의 변환이 완료될 것이라고 생각하시나요?
절대 그렇지 않습니다. Fiber는 브라우저에서 실행할 때 렌더링 성능을 향상시키고, 계산을 중단할 수 있게 만들고, 유휴 상태에서 계산을 수행하기 위해 도입된 구조입니다.
서버 측 렌더링에는 당연히 파이버가 필요하지 않습니다.
파이버가 필요하지 않은 경우 후크 목록은 어디에 저장됩니까? vdom?
실제로 vdom에 배치할 수 있지만 그렇지 않습니다.
예를 들어, useRef 후크를 사용하세요.
firstWorkInProgressHook부터 시작하여 next로 연결된 연결리스트입니다.
그리고 firstWorkInProgressHook은 createHook로 생성된 첫 번째 후크 노드입니다.
vdom에는 마운트되지 않습니다.
왜?
ssr은 한 번만 렌더링하면 되고 업데이트할 필요가 없으므로 vdom에 매달릴 필요가 없습니다.
각 구성요소의 후크 처리를 마칠 때마다 후크 목록을 지우십시오.
따라서 React ssr을 사용하면 전역변수에 Hook이 존재하게 됩니다.
반응 csr과 ssr에서 후크 구현 원리의 차이점을 비교하십시오.
csr에서는 파이버가 vdom에서 생성되며, 이는 렌더링을 중단 가능하게 만들고 유휴 스케줄링을 통해 성능을 향상시키는 데 사용되지만 ssr에서는 직접 렌더링되지 않습니다.
사용하면
Hook이 Fiber 노드에 저장되는 반면, ssr을 사용하면 전역 변수에 직접 배치되고 각 구성 요소가 처리된 후 지워집니다. CSR은 두 번째로 사용되지 않기 때문에
후크 생성 및 업데이트는 마운트와 업데이트의 두 단계로 나뉘며 SSR은 한 번만 처리되며
후크의 구현 원리는 실제로 복잡하지 않습니다
.즉, 특정 컨텍스트에서 연결된 목록에 연결된 목록을 저장하면 후크 API가 연결된 목록의 다른 요소에서 해당 데이터에 액세스하여 해당 논리를 완료합니다. 이 컨텍스트는 vdom, Fiber 또는 전역 변수일 수 있습니다.
그러나 후크에 대한 아이디어는 여전히 인기가 높습니다. Taobao에서 제작한 서버측 프레임워크는 후크에 대한 아이디어를 도입했습니다.
미드웨이는
서버측 프레임워크에는 당연히 vdom 및 Fiber와 같은 구조가 없지만 Hook의 아이디어는 이에 의존하지 않습니다. Hooks API를 구현하려면 특정 컨텍스트에 연결된 목록만 배치하면 됩니다.
Midway는 반응 후크와 유사한 API를 구현합니다.
후크 목록이 어디에 있는지 구체적으로 살펴보진 않았지만 후크 목록을 저장할 컨텍스트가 있는 한 후크의 구현 원리는 이미 마스터했습니다.
React Hooks는 React Fiber 아키텍처 이후에 등장한 기능입니다. 많은 사람들이 Hook을 Fiber로 구현해야 한다고 잘못 생각하고 있습니다. 우리는 React, Preact, React SSR, Midway 각각에서 Hook의 구현을 살펴보고 그 사실을 발견했습니다. 그렇지 않습니다:
컨텍스트
그렇다면 반응 후크는 이를 구현하기 위해 광섬유에 의존해야 합니까?
분명히 그렇지는 않습니다. Fiber, vdom, 전역 변수 또는 심지어 모든 컨텍스트와 함께 사용할 수 있습니다.