반응으로 후크를 구현하는 방법은 무엇입니까? Fiber에 의존해야 합니까?

react훅을 구현하는 방법은 무엇인가요? React Hooks의 구현은 Fiber에 의존해야 합니까? 다음 문서에서는 다양한 프레임워크의 후크가 어떻게 구현되는지 보여줍니다. 이것이 도움이 되기를 바랍니다.

React의 Hooks는 Fiber 이후에 등장한 기능이므로 많은 사람들이 Hooks가 Fiber에 의존하여 구현되어야 한다고 잘못 생각하고 있습니다. 실제로 두 가지가 반드시 연결되는 것은 아닙니다. [관련 권장 사항: Redis 동영상 튜토리얼]

이제 Hooks가 React로 구현될 뿐만 아니라 이 기능은 preact, React ssr, Midway 등의 프레임워크에서도 구현됩니다. 구현은 Fiber에 의존하지 않습니다.

다양한 프레임워크에서 후크가 어떻게 구현되는지 살펴보겠습니다.

React가 후크를 구현하는 방법

react는 jsx를 통해 인터페이스를 설명합니다. jsx는 babel 또는 tsc와 같은 컴파일 도구를 통해 렌더링 함수로 컴파일됩니다. 그런 다음 실행하여 vdom을 생성합니다.

여기의 렌더링 함수는 React17 이전의 React.createElement였습니다.

React 17 이후에는 jsx로 변경되었습니다.

이 jsx-runtime은 자동으로 이전처럼 각 구성 요소에 대해 React 가져오기를 유지할 필요가 없습니다.

render 함수 실행은 vdom을 생성합니다:

vdom의 구조는 다음과 같습니다:

React16이 렌더링되기 전에 이 vdom은 실제 DOM을 추가, 삭제 및 수정하면서 재귀적으로 생성됩니다.

React16에 Fiber 아키텍처가 도입된 후 추가 단계가 있었습니다. 먼저 vdom을 Fiber로 변환한 다음 Fiber를 렌더링합니다.

vdom을 Fiber로 변환하는 과정을 reconcile이라고 하며, 실제 dom을 추가, 삭제, 수정하는 마지막 과정을 commit이라고 합니다.

왜 그러한 전환을 해야 합니까?

vdom에는 하위 노드에 대한 참조만 있고 상위 노드 상위 및 기타 형제 노드에 대한 참조가 없기 때문에 중단 없이 한 번에 모든 vdom 노드를 dom에 재귀적으로 렌더링해야 합니다.

방해를 받으면 어떻게 되나요? 상위 노드와 형제 노드는 기록되지 않으므로 하위 노드만 계속 처리할 수 있지만 vdom의 다른 부분은 처리할 수 없습니다.

그래서 React는 이런 종류의 파이버 구조를 도입했습니다. 즉, 중단 및 복구 후에 처리되지 않은 모든 노드를 찾을 수 있기 때문에 중단될 수 있는 상위 노드 반환, 하위 노드, 형제 노드 형제 등과 같은 참조가 있습니다. .

섬유 노드의 구조는 다음과 같습니다.

이 프로세스는 중단될 수 있으며 자연스럽게 예약될 수도 있습니다. 이것이 바로 스케줄 프로세스입니다.

그래서 파이버 아키텍처는 일정, 조정(vdom을 파이버로 변환), 커밋(dom으로 업데이트)의 세 단계로 나뉩니다.

Hooks는 함수 구성 요소에서 일부 값에 액세스하는 데 사용될 수 있으며 이러한 값은 파이버 노드에 저장됩니다.

예를 들어, 이 함수 구성 요소에는 6개의 후크가 사용됩니다.

해당 파이버 노드에는 6개 요소의 memorizedState 연결 목록이 있습니다.

다음을 통해 연결됨:

다른 후크 memorizedState 연결 목록의 다양한 요소에 대한 값에 액세스하는 것이 반응 후크의 원리입니다.

이 연결 목록에는 생성 단계와 업데이트 단계가 있으므로 useXxx의 최종 구현이 mountXxx와 updateXxx로 나누어져 있음을 알 수 있습니다.

여기서 마운트 단계는 후크 노드를 생성하고 이를 연결 목록:

생성된 후크 연결 목록은 파이버 노드의 memorizedState 속성에 연결됩니다.

업데이트 시 자연스럽게 Fiber 노드에서 후크 목록을 꺼낼 수 있습니다.

이러한 방식으로 useXxx API는 여러 렌더링 중에 Fiber 노드에서 해당 memorizedState를 찾을 수 있습니다.

이것은 반응 후크의 원리입니다. 파이버 노드에 후크를 저장한다고 볼 수 있습니다.

그렇다면 preact의 차이점은 무엇인가요?

preact Hook 구현 방법

preact는 React 코드와 호환되는 보다 가벼운 프레임워크이며, Hook과 같은 React 기능은 물론 클래스 구성 요소와 함수 구성 요소도 지원합니다. 그러나 파이버 아키텍처를 구현하지 않습니다.

궁극적인 성능이 아닌 궁극적인 크기(단 3kb)를 주로 고려하기 때문입니다.

방금 우리는 반응이 파이버 노드에 후크 목록을 저장한다는 것을 배웠습니다. preact에 파이버 노드가 없으면 후크 목록은 어디에 저장됩니까?

사실 Fiber가 성능 향상을 위해 vdom을 수정한 것이라고 생각하기 쉬우며, vdom과 본질적인 차이는 없습니다. 그렇다면 그냥 vdom에 Hook을 저장하면 안 될까요?

실제로 preact는 vdom에 Hook List를 올려두었습니다.

예를 들어 이 함수 구성 요소에는 4개의 후크가 있습니다:

해당 구현은 vdom의 해당 후크에 액세스하는 것입니다:

후크를 반응처럼 마운트 및 업데이트로 나누지 않습니다. 두 단계가 병합되어 함께 처리됩니다.

그림과 같이, component.__hooks 배열에 Hook을 저장하고, 첨자를 통해 접근합니다.

이 구성 요소는 vdom의 속성입니다.

즉, 후크 값은 vnode._comComponent._hooks 배열에 저장됩니다.

후크 구현 시 React와 preact의 차이점을 비교하세요.

• react는 후크 목록을 FiberNode.memorizedState 속성에 저장하고 preact는 후크 목록을 vnode._comComponent._hooks 속성

• react에 저장합니다. preact의 목록은 next를 통해 연결됩니다. preact의 후크 목록은 배열이며 첨자를 통해 액세스됩니다.

• react는 후크 목록의 생성과 업데이트를 분리합니다. 즉, useXxx는 mountXxx와 updateXxx로 구분됩니다. preact

는 병합되어 함께 처리됩니다. 따라서 hooks 구현은 파이버에 의존하지 않으며 단지 구성 요소에 해당하는 후크의 데이터를 저장할 장소를 찾으면 됩니다. 어디에 저장되어 있는지는 중요하지 않습니다.

vdom, Fiber 및 구성 요소 렌더링은 밀접하게 관련되어 있으므로 이러한 구조에 저장됩니다.

후크를 구현하기 위한 반응 ssr과 마찬가지로 파이버나 vdom에는 존재하지 않습니다.

반응 ssr이 후크를 구현하는 방법

실제로 csr 외에도 React-dom 패키지는 ssr을 수행할 수도 있습니다.

언제 csr을 사용하려면, React-dom의 render 메소드를 사용하세요:

ssr을 사용할 때, React-dom/server의 renderToString 메소드나 renderToStream 메소드를 사용하세요:

다음에 vdom이 Fiber로 변환될 것이라고 생각하시나요? ssr을 사용하시나요?

절대 그렇지 않습니다. Fiber는 브라우저에서 실행 시 렌더링 성능을 향상시키고, 계산을 중단할 수 없게 만들고, 유휴 상태에서 계산을 수행하기 위해 도입된 구조입니다.

서버 측 렌더링에는 당연히 파이버가 필요하지 않습니다.

Fiber가 필요하지 않은 경우 후크 목록은 어디에 저장되나요? vdom?

실제로 vdom에 배치할 수 있지만 그렇지 않습니다.

예를 들어 useRef 후크는

firstWorkInProgressHook부터 시작하여 next로 연결된 연결 목록입니다.

createHook을 사용하여 firstWorkInProgressHook에 의해 생성된 첫 번째 후크 노드:

는 vdom에 마운트되지 않습니다.

왜?

ssr은 한 번만 렌더링하면 되고 업데이트할 필요가 없기 때문에 vdom에 매달릴 필요가 없습니다.

각 구성 요소의 후크 처리를 마칠 때마다 후크 목록을 지우세요.

그래서 ssr 반응시 전역 변수에 Hooks가 존재하게 됩니다.

react csr과 ssr에서 후크 구현 원리의 차이점을 비교하세요.

• csr은 렌더링을 중단 가능하게 만들고 유휴 예약을 통해 성능을 향상시키는 데 사용되는 vdom에서 파이버를 생성하지만 ssr은 그렇지 않습니다. 예, vdom은 직접적으로

• csr을 렌더링하고 파이버 노드에 후크를 저장합니다. ssr을 사용하면 전역 변수에 직접 배치되고 각 구성 요소가 처리된 후에 지워집니다. 두 번 사용되지 않기 때문에

• csr은 후크 생성과 업데이트를 마운트와 업데이트의 두 단계로 나누지만 ssr은 한 번만 처리되고 생성 단계만 처리됩니다

원리 후크 구현 실제로는 복잡하지 않습니다. 특정 컨텍스트에 연결된 목록을 저장한 다음 후크 API가 연결된 목록의 다른 요소에서 해당 데이터에 액세스하여 해당 논리를 완성합니다. 이 컨텍스트는 vdom, Fiber 또는 전역 변수일 수 있습니다.

그러나 Hooks 아이디어는 여전히 꽤 인기가 있습니다. Taobao에서 출시한 서버측 프레임워크 Midway는 Hooks 아이디어를 도입했습니다. Node.js 프레임워크:

서버 측 프레임워크에는 당연히 vdom 및 Fiber와 같은 구조가 없지만 Hooks의 아이디어는 이들에 의존하지 않습니다. Hooks API를 구현하려면 링크만 배치하면 됩니다. 특정 상황에서 목록을 작성하세요.

midway는 반응 후크와 유사한 API를 구현했습니다.

후크 목록이 어디에 있는지는 보지 못했지만 컨텍스트가 있는 한 후크의 구현 원리를 이미 마스터했습니다. 후크 목록을 저장하면 어디든 괜찮습니다.

요약

react Hooks는 React Fiber 아키텍처 이후에 등장한 기능입니다. 많은 사람들이 Hooks가 Fiber로 구현되어야 한다고 잘못 믿고 있습니다. 우리는 각각 React, Preact, React SSR 및 Midway에서 Hook의 구현을 살펴보았습니다. , 그리고 그렇지 않다는 사실을 발견했습니다.

react는 vdom을 Fiber로 변환한 다음 Hook 목록을 Fiber.memorizedState 속성에 저장하고 다음을 통해 연결합니다.

preact는 Fiber를 구현하지 않고 Hook 목록을 vnode._comComponent._hooks 속성 위의 배열 구현에서는 서브스크립트를 통해

react ssr에 액세스할 때 파이버가 필요하지 않지만 후크 목록은 vdom에 매달리지 않고 전역 변수에 직접 배치됩니다. 렌더링만 하면 되기 때문입니다. 렌더링 후 구성 요소는 이 전역 변수를 지웁니다.

• midway는 후크와 유사한 API도 구현하는 Node.js 프레임워크입니다. 어디에 넣을지 자세히 설명하지는 않습니다. 후크 목록을 저장하는 컨텍스트라면 괜찮을 것입니다
• 그럼, 후크를 반응시키려면 파이버에 의존해야 합니까?
• 물론 그렇지는 않습니다. Fiber, vdom, 전역 변수 또는 모든 컨텍스트와 함께 사용할 수 있습니다.
• 더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오

를 방문하세요! !

위 내용은 반응으로 후크를 구현하는 방법은 무엇입니까? Fiber에 의존해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!