on
후드 아래에서 React하는 방법
후드 아래에서 React하는 방법
반응형
어떻게 리액션이 통사당을 넘어서 실제로 작용하는가?
이 질문은 오랫동안 내 생각을 지배해 왔다. 제 호기심은 리액트에 대한 깊은 연구를 하게 만들었고, 제 연구결과는 꽤 흥미로웠습니다.
리액트를 약화시키려는 나의 탐구는 내가 지금까지 해왔던 것 중 가장 눈을 뜨게 하는 것 중 하나였다.
만약 여러분이 React가 실제로 어떻게 작동하는지도 알고 싶다면, 여러분은 올바른 장소에 있는 것입니다.
이 기사에서는 렌더링 프로세스와 관련하여 React의 내부 작업에 대한 저의 흥미로운 발견을 공유하려고 합니다.
HTML, DOM 및 반응의 본질
우리 모두는 웹 페이지가 HTML을 사용하여 구성된다는 것을 안다. 따라서 웹 페이지는 기본적으로 HTML 문서이다.
HTML 문서는 querySelectorAll(), getElementsById() 등의 방법을 사용하여 DOM이라는 API를 통해 수정할 수 있습니다.
수정 후 웹 브라우저는 변경 사항을 반영하도록 페이지를 다시 렌더링해야 합니다.
그러나 이 프로세스는 웹 브라우저가 수행해야 하는 비용이 매우 많이 듭니다. 따라서 정기적으로 변경되는 페이지(일명 동적 웹 페이지)가 있다면 DOM을 직접 조작하는 것은 매우 비효율적일 수 있습니다.
실제로 자바스크립트로 10,000개의 개체를 만드는 것보다 DOM을 다시 그리는 것이 더 느립니다.
이 사실은 React의 존재와 유용성을 라이브러리로 단정한다.
React는 사용자 인터페이스를 만들 수 있는 선언적 방법을 제공합니다. 즉, 웹 페이지를 렌더링하는 방법이나 요소를 삽입하는 방법을 지정할 필요가 없습니다. 대신이 요소들 뭘 만들어 내고 어떻게 그들이 모습과 설명한다.
반응 요소는 그냥 개체입니다.
당신은 이것을 알았을 수도 있고 몰랐을 수도 있지만, React는 단지 자바스크립트 객체의 트리일 뿐이다.
예를 들어 다음과 같은 기능 구성 요소를 고려하십시오.
const Title = () => { return ( Hello World ) }
React에서 구성 요소는 웹 페이지에서 만들려는 UI를 설명하는 클래스 또는 함수입니다.
React 요소는 기본적으로 DOM에 삽입하려는 UI에 대한 설명입니다. 따라서 ReactDOM 라이브러리의 렌더링() 메서드가 호출될 때까지 React 요소는 DOM 요소가 아닙니다.
상위 요소에서 구성 요소를 호출하면 React는 해당 하위 요소에 대한 렌더링() 메서드를 호출하고 특정 속성을 가진 일반 개체인 React 요소를 반환합니다.
예를 들어 위의 기능 구성 요소를 호출하면 실제로 다음 개체를 반환합니다.
{ type: “div”, key: null, ref: null, “$$typeof”: Symbol(react.element), props: { children: { type: “h1”, key: null, ref: null, props: { id: “title” children: “Hello World!” }, } } }
개체에는 특정 속성이 포함되어 있습니다.
type: 사용된 태그 유형에 대한 참조입니다. 기본 DOM HTML 요소(예: 주, div 등)를 사용하는 경우 유형은 해당 DOM 요소의 문자열 표현을 가리킵니다. 그러나 일반적인 가져오기 구문을 사용하여 사용자 지정 반응 구성 요소를 가져오면 구성 요소 요소를 참조하는 것입니다.
키: 이 속성은 고유한 값을 사용하여 다른 어린이 중 요소를 식별하는 데 사용됩니다. 일반적으로 하위 요소 목록에 대해 반복하는 경우입니다.
참조: 실제 DOM 노드에 대한 참조입니다.
참조: 실제 DOM 노드에 대한 참조입니다. typeOf: 이 속성의 값은 항상 기호입니다. 기호는 ES6에 도입된 JacaScipt 데이터 유형입니다. 개체가 값을 받아들이고 고유한 기호를 반환합니다. 반응의 경우 기호 물체는 반응을 받아들입니다. 이 기능은 크로스 스크립팅 공격에 대한 보호 기능입니다. 이 기능은 React(반응) 요소를 식별하여 악의적인 값이 React(반응)
product: 하위 요소가 모두 포함됩니다. 구성 요소에 하위 항목이 여러 개 있는 경우 하위 속성은 개체 대신 배열이 됩니다. 각 개체에는 동일한 속성 집합이 있습니다.
이 개체를 가상 DOM이라고 합니다.
이러한 개체를 구축하는 과정은 DOM에 직접 쓰는 것보다 상당히 저렴합니다. 따라서 DOM을 직접 수정하는 대신 가상 DOM을 생성하고 대신 개체 트리를 수정할 수 있습니다.
React는 렌더링 함수가 호출될 때마다 요소의 트리를 만듭니다.
화해
조정에는 트리의 어떤 부분을 교체해야 하는지 결정하는 분산 알고리즘이 포함되어 있습니다.
다시 말해, 이것은 변경이 이루어질 때 React가 React 요소 트리와 DOM 트리를 조정하는 방법입니다.
분산 알고리즘은 우리가 두 트리 사이의 차이를 구별하고 우리가 대체해야 할 트리의 어떤 부분을 결정할 수 있는 방법이다.
React의 중요한 동작 중 하나는 최상위(루트) 요소의 유형 변화에 어떻게 반응하는가이다.
이 경우 반응으로 전체 요소 트리를 해체하고 새 트리를 만듭니다.
예를 들어 div 태그가 범위 태그로 변경되면 React는 DOM 노드와 함께 전체 트리를 삭제합니다. 다음과 같은 경우도 발생합니다.
모든 이전 구성 요소 인스턴스(div)는 구성 요소WillUnmount 및 동등한 useEffect 후크를 수신합니다.
새 구성 요소 트리는 스팬을 루트 요소로 사용하여 빌드됩니다.
반응이 다시 리렌딩을 시작합니다.
새 노드가 DOM에 삽입됩니다.
새 구성 요소에 구성 요소WillMont 및 ComponentDidMount를 수신하고 해당 구성 요소의 사용효과 후크가 실행됩니다.
이전 소품 및 상태(div의 경우)가 삭제됩니다.
속성만 변경된 경우 React는 변경된 속성만 업데이트하고 전체 트리를 해체하지 않습니다.
그래서 우리가 코드에서와 같이 한 제품 품목에서 다른 제품 품목으로 옮겨간다고 가정한다.
// Product Five
// Product Six
React는 동일한 구성 요소 인스턴스를 유지 관리하며, 새 ID 프로포트를 전달한 다음 다시 렌더링하므로 다른 페이지로 이동합니다.
아이들.
목록이 있고 목록의 맨 앞에 새 동영상을 삽입한다고 가정해 보겠습니다.
First item Second item
New First item First item Second item
리액션은 변경이 발생했는지, 정확히 어디에서 변경이 발생했는지 알 수 있는 방법이 없습니다.
결과적으로 React는 트리를 해체하고 새 트리를 재구축하지만 이는 매우 비효율적입니다.
대신 각 하위의 키 속성에 고유한 값을 전달해야 합니다.
React는 키 속성의 고유한 값을 재귀적으로 검사하고 비교합니다. 이렇게 하면 목록에서 새 항목을 삽입할 위치를 알 수 있습니다.
First item Second item ``` ```js New First item First item Second item ``` ### DOM에 렌더링 ```js import ReactDOM from 'react-dom' import App from "./App.js"; ReactDOM.render( , document.getElementById("root") ); ``` 이 프로세스는 DOM 트리, React 요소 트리 및 전체 분산 프로세스를 구축하는 조정 프로세스를 트리거합니다. 그런 다음 React는 React Component 트리를 브라우저 DOM에 삽입합니다. ### 마무리하기 우리는 반응 원소가 그저 평범한 물체라는 것을 보아왔다. 모든 중첩된 구성 요소에 대해 React는 가상 DOM을 구성하는 개체 트리를 생성합니다. 그런 다음 조정이라고 하는 프로세스를 통해 가상 DOM을 업데이트합니다.
from http://issue-disk.tistory.com/66 by ccl(A) rewrite - 2021-10-19 11:27:52