TechCodeview

실제/브라우저 DOM:

DOM은 '문서 객체 모델'. 웹페이지나 애플리케이션에서 HTML을 구조적으로 표현한 것입니다. 전체 UI를 나타냅니다. (사용자 인터페이스) ~의 웹 애플리케이션을 트리 데이터 구조로 사용합니다.

이것은 HTML 요소의 구조적 표현 간단한 말로 웹 애플리케이션을 말합니다.

내용에 어떤 변화가 있을 때마다 애플리케이션 UI 상태, DOM이 업데이트되어 변경 사항을 나타냅니다. DOM은 애플리케이션 사용자 인터페이스를 업데이트하기 위해 변경될 때마다 렌더링되고 조작되며, 이는 성능에 영향을 미치고 속도를 저하시킵니다.

따라서 많은 UI 구성 요소와 복잡한 구조로 인해 DOM, 변경될 때마다 다시 렌더링해야 하므로 업데이트 비용이 더 많이 듭니다.

DOM은 트리 데이터 구조로 구성됩니다. 각 노드로 구성됩니다. UI 요소 웹 문서에 존재합니다.

mysql 쇼 사용자

DOM 업데이트:

우리가 JavaScript에 대해 알고 있다면 사람들이 JavaScript를 사용하는 모습을 볼 수 있을 것입니다. 'getElementById()' 또는 'getElementByClass()' DOM의 내용을 수정하는 방법.

애플리케이션 상태에 변화가 발생할 때마다 DOM은 UI의 변화를 반영하도록 업데이트됩니다.

Virtual DOM이 작업 속도를 높이는 방법:

애플리케이션에 새로운 것이 추가되면 가상 DOM이 생성되어 트리로 표시됩니다. 애플리케이션의 모든 요소는 트리의 노드입니다.

따라서 요소의 위치가 변경될 때마다 새로운 가상 DOM이 생성됩니다. 최신 가상 DOM 트리가 최신 버전과 비교되어 변경 사항이 기록됩니다.

실제 DOM을 통해 이러한 변경을 수행할 수 있는 방법을 찾습니다. 그러면 업데이트된 요소가 페이지에서 다시 렌더링됩니다.

Virtual DOM이 React에서 어떻게 도움이 되는지:

React의 모든 것은 컴포넌트, 기능적 컴포넌트, 클래스 컴포넌트로 관찰됩니다. 구성 요소에는 상태가 있습니다. JSX 파일에서 무언가를 변경할 때마다 간단히 말해서 구성 요소의 상태가 변경될 때마다 반응은 가상 DOM 트리를 업데이트합니다.

React는 매번 두 개의 가상 DOM을 유지합니다. 첫 번째 항목에는 업데이트된 가상 DOM이 포함되어 있고, 다른 하나는 업데이트된 가상 DOM의 사전 업데이트된 버전입니다. 업데이트된 가상 DOM의 사전 업데이트 버전을 비교하고 어떤 구성요소가 변경될 것인지와 같이 DOM에서 변경된 사항을 찾습니다.

비효율적으로 보일 수도 있지만 가상 DOM을 업데이트하는 데 많은 시간이 소요될 수 없으므로 비용은 더 이상 들지 않습니다.

현재 가상 DOM 트리를 이전 가상 DOM 트리와 비교할 때 '반항'. React가 변경된 내용을 알게 되면 실제 DOM의 객체를 업데이트합니다. React는 배치 업데이트를 사용하여 실제 DOM을 업데이트합니다. 구성 요소 상태에 대한 단일 변경 사항에 대한 업데이트를 보내는 대신 실제 DOM에 대한 변경 사항이 일괄적으로 전송됩니다.

UI를 다시 렌더링하는 것은 가장 비용이 많이 드는 부분이며, React는 일괄 업데이트를 수신하여 UI를 다시 렌더링하는 Real DOM을 보장함으로써 가장 효율적으로 작업을 수행합니다. 변경 사항을 실제 DOM으로 변환하는 프로세스를 호출합니다. 화해.

이는 성능을 향상시키며 개발자가 React와 Virtual DOM을 좋아하는 주된 이유입니다.

React의 가상 DOM이란 무엇입니까?

Virtual DOM의 개념은 Real DOM의 성능을 더 좋고 빠르게 만들기 위해 나온 것입니다. Virtual DOM은 DOM의 가상 기호입니다.

그러나 주요 차이점은 변경될 때마다 실제 DOM 대신 가상 DOM이 업데이트된다는 것입니다.

예를 들어, 진짜 그리고 가상 DOM 로 표현된다 트리 구조. 트리의 모든 요소는 노드입니다. ㅏ 마디 애플리케이션 UI에 새 항목이 추가되면 트리에 추가됩니다.

요소의 위치가 변경되면 새로운 가상 DOM 트리가 생성됩니다. 가상 DOM 최소 작업 수를 계산합니다. 실제 DOM에서 실제 DOM을 변경합니다. 전체 실제 DOM을 다시 렌더링하는 비용과 작업을 줄여 효율적이고 성능이 향상됩니다.

이제 우리는 Real DOM과 Virtual DOM에 대해 정상적으로 이해했습니다.

방법을 살펴 보겠습니다. 반응하다 사용하여 작동 가상 DOM.

• 각 UI는 개별적입니다. 요소, 모든 구성 요소에는 상태가 있습니다.
• 반응은 다음과 같습니다 관찰 가능한 패턴 그리고 상태의 변화를 관찰합니다.
• 컴포넌트의 상태가 변경될 때마다 React는 가상 DOM 트리를 업데이트합니다. 하지만 변경하지 않습니다 실제 DOM 트리.
• 반응하다 비교하다 그만큼 현재 버전 ~의 가상 DOM 와 더불어 이전 버전 ~ 후에 업데이트 중입니다.
• React는 어떤 객체가 변경되었는지 알고 있습니다. 가상 DOM. 이는 다음의 개체를 대체합니다. 실제 DOM , 다음으로 이어지는 최소한의 조작 운영.
• 이 과정은 다음과 같이 알려져 있습니다. '분화'. 이 사진을 보면 개념이 명확해집니다.

이미지에서는 진한 파란색 서클 는 노드 변경된 것입니다. 그만큼 상태 이러한 구성 요소 중 일부가 변경되었습니다. React는 이전 버전과 현재 버전의 차이를 계산합니다. 가상 DOM 트리, 변경된 UI를 표시하기 위해 전체 상위 하위 트리가 다시 렌더링됩니다.

업데이트된 트리는 일괄 업데이트됨 (실제 DOM에 대한 업데이트는 각 상태 변경에 대한 업데이트를 보내는 대신 일괄적으로 전송됩니다.) 실제 DOM에.

이에 대해 더 깊이 알아보기 위해서는 다음과 같은 내용을 알아야 합니다. 리액트 렌더() 기능.

그렇다면 우리는 몇 가지 중요한 사항에 대해 알아야 합니다. 특징 반응의.

JSX

JSX 약자 자바스크립트 XML. 이것은 구문 확장 JS의. JSX를 사용하면 다음과 같이 작성할 수 있습니다. HTML 구조 포함된 파일에서 자바스크립트 코드.

구성요소

구성 요소는 독립적인 그리고 재사용 가능 코드. React 앱의 모든 사용자 인터페이스는 구성 요소입니다. 하나의 애플리케이션에 여러 가지 구성 요소.

구성품은 2가지 종류가 있는데, 클래스 구성요소 그리고 기능적 구성 요소.

클래스 구성 요소는 '상태'를 사용하여 사용자 인터페이스를 변경하므로 상태 저장됩니다. 기능적 구성요소는 상태 비저장 구성요소입니다. 이는 'props'라는 임의의 매개변수를 취하는 JavaScript 함수처럼 작동합니다.

반응 후크 기능적 구성 요소가 있는 상태에 액세스하도록 도입되었습니다.

수명주기 방법

수명주기 방법 중요한 방법이다 내장 DOM에서 지속되는 동안 구성요소에 대해 작동하는 반응입니다. React의 각 구성요소는 이벤트의 수명주기를 따릅니다.

render() 메서드는 사용되는 최대값입니다. 수명주기 방법 .

내에서 유일한 방법입니다. 반응 클래스 구성 요소 . 따라서 각 클래스에서는 컴포넌트 render()가 호출됩니다.

렌더링() 메서드 UI를 통해 구성요소의 렌더링을 처리합니다. render()에는 화면에 표시되는 모든 로직이 포함되어 있습니다. 그것은 또한 없는 디스플레이에 아무것도 표시하지 않으려면 값을 지정합니다.

예는 다음과 같습니다.

 class Header extends React.Component{ render(){ return React Introduction } } 

예제에서는 다음을 보여줍니다. JSX render()에 작성되었습니다.

언제 상태 또는 소품 구성요소 내에서 업데이트됩니다. 세우다() 다른 React 요소 트리를 반환합니다.

하위 문자열 메소드 Java

콘솔이나 JavaScript 파일에 코드를 작성할 때 다음과 같은 일이 발생합니다.

• 브라우저는 HTML을 구문 분석하여 ID가 ​​있는 노드를 찾습니다.
• 요소의 하위 요소를 제거합니다.
• 요소를 업데이트합니다. (돔) 와 더불어 '업데이트된 값'입니다.
• 다시 계산합니다 CSS 상위 및 하위 노드의 경우.
• 그런 다음 레이아웃을 업데이트합니다.

마지막으로 화면 표시에서 트리를 탐색합니다.

따라서 우리가 알고 있듯이 DOM 내용 변경이 포함됩니다. 그것에 더 붙어 있습니다.

CSS를 다시 계산하고 레이아웃을 변경하는 데에는 복잡한 알고리즘이 포함되어 성능에 영향을 미칩니다.

따라서 React는 가상 DOM이라는 것을 사용하므로 이를 처리하는 다양한 방법이 있습니다.

반응돔

React-dom 패키지는 필요한 경우 React 모델 외부로 경로를 탈출하기 위해 애플리케이션의 최상위 수준에서 DOM 관련 메서드를 제공합니다.

 import * as ReactDOM from 'react-dom'; 

npm과 함께 ES5를 사용하는 경우 다음도 작성해야 합니다.

 var ReactDOM = require('react-dom'); 

그만큼 반응 돔 패키지는 클라이언트 및 서버 앱과 관련된 모듈도 제공합니다.

• 반응 돔/클라이언트
• 반응 돔/서버

React-dom 패키지는 다음 메소드를 내보냅니다.

• 생성포털()
• 플러시싱크()

React-dom 메서드도 내보냅니다.

• 렌더링()
• 수화물 ()
• findDOMNode()
• unmountComponentAtNode()

참고: 수화물과 렌더링이 모두 최신 클라이언트 방법으로 대체되었습니다.

브라우저 지원

React는 모든 최신 브라우저를 지원하며 이전 버전에는 일부 폴리필이 필요합니다.

참고: Internet Explorer와 같이 ES5 방식을 지원하지 않는 이전 브라우저는 지원할 수 없습니다. 페이지에 포함된 es5-shim 및 es5-sham과 같은 폴리필이 있으면 앱이 최신 브라우저에서 작동하는 것을 확인할 수 있지만, 경로를 선택하면 스스로 문제를 해결할 수 있습니다.

참조

생성포털()

포털 생성() 포털은 DOM 구성 요소 순위 외부에 존재하는 DOM 노드로 하위 항목을 읽어들이는 방법을 제공합니다.

플러시싱크()

제공된 콜백에서 동시에 React 업데이트를 강제합니다. DOM이 즉시 업데이트되도록 보장합니다.

 // Force this state update to be synchronous. flushSync(() => { setCount(count + 1); }); // By this point, DOM is updated. 

메모:

• 드물게 사용하십시오. 플러시 동기화는 성능을 크게 저하시킵니다.
• FlushSync는 보류 중인 경계를 강제로 대체 상태를 표시합니다.
• 보류 중인 효과를 실행하고 업데이트를 반환하기 전에 동시에 적용합니다.
• flashSync는 콜백 외부에서 업데이트를 플러시하여 콜백 업데이트를 플러시합니다. 예를 들어, 클릭으로 인해 보류 중인 업데이트가 있는 경우 React는 콜백에서 업데이트를 플러시하기 전에 업데이트를 플러시할 수 있습니다.

레거시 참조

세우다()

 render(element, container[, callback]) 

참고: Render는 React에서 Root를 생성하는 것으로 대체됩니다. 제공된 컨테이너에서 React 요소를 DOM으로 렌더링하고 구성 요소에 대한 참조를 반환합니다.

React 요소가 이전에 컨테이너에 렌더링된 경우 업데이트가 수행되므로 최신 React 요소를 반영해야 합니다.

선택적 콜백이 제공되면 구성 요소가 렌더링될 때 실행됩니다.

메모:

Render() 메서드는 컨테이너 노드가 지나갈 때 컨테이너 노드의 내용을 제어합니다. 기존 DOM 요소가 대체됩니다.

Render()는 컨테이너의 노드를 변경하지 않습니다(컨테이너의 하위 노드만 수정할 수 있음). 하위 요소를 덮어쓰지 않고 기존 DOM 노드에 구성 요소를 삽입하는 것이 가능할 수도 있습니다.

Render()는 현재 ReactComponent의 루트 인스턴스를 다시 참조합니다.

그러나 반환 값은 상속되며 어떤 경우에는 React의 향후 버전이 구성 요소를 비동기적으로 생성할 수 있으므로 피할 수 있습니다.

ReactComponent 프로토타입에 대한 참조가 필요한 경우 가장 좋은 해결책은 요소에 리콜 참조를 첨부하는 것입니다.

Render()는 렌더링된 컨테이너를 서버에 하이드레이트하는 데 사용됩니다. 사용 수화물뿌리() 그 대신에.

수산화 시키다()

수화물은 수화물 뿌리로 대체됩니다.

이는 render()와 똑같지만 HTML 콘텐츠가 ReactDOMServer에 의해 렌더링되는 컨테이너에 사용됩니다. React는 이벤트 리스너를 현재 마크업에 연결하려고 시도합니다.

 hydrate(element, container[, callback]) 

메모:

라지니칸트

React는 렌더링된 콘텐츠가 서버와 클라이언트 간에 동일할 것으로 기대합니다. 우리는 본문의 내용을 수정할 수 있지만 불일치를 오류로 간주하여 바로잡아야 합니다. 개발 모드에서 React는 수화 중 불일치를 경고합니다.

특정 차이점이 불일치로 인해 수정된다는 보장은 없습니다.

이는 대부분의 애플리케이션에서 성능상의 이유로 중요하며 모든 플래그를 검증하는 데 비용이 너무 많이 듭니다.

요소의 속성이나 텍스트 내용이 서버와 클라이언트 사이에서 필연적으로 다르다고 가정합니다(예: 타임스탬프 ). 이 경우 다음을 추가하여 경고를 음소거할 수 있습니다. 억제HydrationWarning = {true} 요소에.

텍스트 요소가 아닌 경우 패치를 시도할 수 없으므로 향후 업데이트까지 일관성이 유지될 수 있습니다.

서버와 클라이언트에서 의도적으로 서로 다른 기능을 제공해야 하는 경우 2패스 렌더링을 수행할 수 있습니다. 클라이언트에 남아 있는 구성 요소는 this.state.isClient와 같은 상태 변수를 읽을 수 있으며, 여기서는 true로 설정됩니다. 컴포넌트DidMount().

초기 렌더 패스는 서버와 동일한 작업을 수행하여 불일치를 방지하지만 추가 패스는 하이드레이션 후에 동기적으로 수행됩니다.

참고: 이 접근 방식은 구성 요소를 두 번 수행하므로 속도가 느려지므로 주의해서 사용하세요.

 unmountComponentAtNode() unmountComponentAtNode(container) 

메모:

unmountComponentAtNode 로 대체되었습니다. 루트.마운트 해제() 반응에서. DOM에서 마운트된 React 구성 요소를 지우고 이벤트 핸들러와 상태를 정리합니다.

컨테이너에 구성 요소가 탑재되지 않은 경우 아무 작업도 수행할 수 없습니다. 마운트된 구성 요소가 없으면 true를 반환하고, 마운트 해제할 구성 요소가 없으면 false를 반환합니다.

findDOMNode()

참고: findDOMNode는 기본 DOM 노드에 액세스하는 데 사용되는 탈출구입니다. 이 탈출구는 구성 요소 추상화를 뚫기 때문에 대부분의 경우 권장되지 않습니다. StrictMode에서는 더 이상 사용되지 않습니다.

findDOMNode(컴포넌트)

이 구성 요소가 DOM에 마운트된 경우 해당 기본 브라우저 DOM 요소가 반환됩니다. 이 방법은 양식 필드 값과 같은 DOM에서 값을 읽고 DOM 측정을 수행하는 데 유용합니다. 대부분의 경우 DOM 노드에 참조를 연결하고 findDOMNode 사용을 피할 수 있습니다.

구성 요소가 null 또는 false를 반환하면 findDOMNode는 null을 반환합니다. 구성 요소가 문자열로 렌더링되면 findDOMNode는 해당 값이 포함된 텍스트 DOM 노드를 반환합니다. findDOMNode가 비어 있지 않은 첫 번째 하위 항목에 해당하는 DOM 노드를 반환한 경우 구성 요소는 여러 하위 항목이 있는 조각을 반환할 수 있습니다.

메모:

findDOMNode는 마운트된 구성요소(즉, DOM에 배치된 구성요소)에서만 작동합니다. 아직 마운트되지 않은 구성 요소에서 이를 호출하려고 하면(예: 아직 생성되지 않은 구성 요소의 render()에서 findDOMNode()를 호출하는 경우) 예외가 발생합니다.

findDOMNode는 함수 구성 요소에서 사용할 수 없습니다.

DOM 요소

React는 성능과 브라우저 간 호환성을 위해 브라우저 독립적인 DOM 시스템을 구현합니다. 우리는 이 기회를 통해 브라우저 DOM 구현의 거친 가장자리 중 일부를 정리할 것입니다.

React에서 모든 DOM 속성과 속성(이벤트 핸들러 포함)은 카멜케이스여야 합니다. 예를 들어 HTML tabindex 속성은 React의 tab Index 속성에 해당합니다.

예외는 aria-* 및 data-* 속성이며 소문자여야 합니다. 예를 들어 면적 태그를 면적 태그로 사용할 수 있습니다.

속성의 차이점

여러 속성은 React와 HTML 사이에서 다르게 작동합니다:

확인됨

selected 속성은 체크박스 또는 라디오 유형의 구성요소에서 지원됩니다. 이는 제어되는 부품을 제조하는 데 유용합니다. 이를 사용하여 구성 요소가 선택되었는지 여부를 결정할 수 있습니다.

DefaultChecked는 구성 요소가 처음 마운트될 때 확인되는지 확인하는 확인되지 않은 대응 항목입니다.

js 온로드

클래스 이름

CSS 클래스를 지정하려면 className 속성을 사용하세요. 이는 다음과 같은 모든 일반 DOM 및 SVG 요소에 적용됩니다. , 등.

웹 구성 요소(흔하지 않음)와 함께 React를 사용하는 경우 대신 class 속성을 사용하세요.

위험하게SetInnerHTML

위험하게도 SetInnerHTML은 DOM 브라우저에서 innerHTML을 사용하는 React의 대체품입니다. HTML 코드를 구성하는 것은 사용자를 XSS(교차 사이트 스크립팅) 공격에 노출시키기 쉽기 때문에 위험합니다.

따라서 React에서 직접 HTML을 설정할 수 있지만 위험하다는 것을 기억하려면 위험하게도 SetInnerHTML을 입력하고 __html 키가 있는 객체를 전달해야 합니다.

예를 들어:

 function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } htmlFor 

React 요소는 대신 htmlFor를 사용합니다. for는 JavaScript에서 예약어이기 때문입니다.

변경 시

onChange 이벤트가 예상대로 작동합니다. 양식 필드가 변경될 때마다 이벤트가 발생합니다.

우리는 의도적으로 기존 브라우저 동작을 사용하지 않습니다. 그 이유는 동작에 대한 변화가 크고 React가 사용자 입력을 실시간으로 처리하기 위해 이벤트에 의존하기 때문입니다.

선택된

을 선택됨으로 표시하려면 대신 의 값에서 해당 옵션의 값을 참조하세요. 자세한 지침은 '태그 선택'을 참조하세요.

메모:

대부분의 경우 클래스 이름은 외부 CSS 스타일 시트에 정의된 클래스를 참조합니다. 스타일은 React 앱에서 렌더링 시 계산된 스타일을 추가하는 데 사용됩니다. 스타일 속성은 CSS 문자열 대신 카멜 속성이 있는 JavaScript 개체를 허용합니다.

그것은 준수한다 DOM 스타일 JavaScript 속성은 더 효율적이며 다음을 방지합니다. XSS 보안 구멍.

예를 들어:

 const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return Hello World! ; } 

참고: 스타일은 자동 접두어가 붙지 않습니다. 이전 브라우저를 지원하려면 스타일 속성을 제공해야 합니다.

 const divStyle = { WebkitTransition: 'all', // note capital 'W' here msTransition: 'all' // 'ms' is the lowercase vendor prefix }; function ComponentWithTransition() { return This should work cross-browser ; } 

스타일 키는 JS 내에서 DOM 노드의 속성에 액세스하는 데 해당하는 카멜 키입니다. 공급자 접두사 MS는 대문자로 시작됩니다.

React는 일부 인라인 숫자 스타일 속성에 'px' 접미사를 자동으로 추가합니다. 'px' 이외의 단위를 사용하려면 원하는 단위가 포함된 문자열로 값을 지정하세요.

예를 들어:

 // Result style: '10px' Hello World! // Result style: '10%' Hello World! 

그러나 모든 스타일 속성이 픽셀 문자열로 변환되는 것은 아닙니다.

편집 가능한 콘텐츠 경고 억제

하위 요소가 편집 가능한 콘텐츠로 표시된 경우 작동하지 않으므로 경고가 표시됩니다. 이 속성은 경고를 억제합니다.

진압 경고

서버 측 React 렌더링을 사용하는 경우 서버와 클라이언트가 다른 콘텐츠로 렌더링하면 경고가 발생합니다. 그러나 드문 경우지만 정확한 일치를 보장하기는 어렵습니다. 예를 들어 타임스탬프는 서버나 클라이언트에서 다를 것으로 예상됩니다.

억제 경고를 true로 설정하면 요소의 속성과 콘텐츠 간의 불일치에 대해 경고하지 않습니다.

그것은 한 수준의 깊이에서만 작동했으며 탈출용으로 사용되었습니다.

값

value 속성은 및 구성 요소에 의해 설계되었습니다. 이를 사용하여 구성 요소의 값을 설정할 수 있습니다.

이는 제어되는 부품을 제조하는 데 유용합니다. defaultValue 및 같음을 선택 취소하면 직렬로 마운트될 때 구성 요소의 값이 설정됩니다.

지원되는 모든 HTML 속성

모든 사용자 정의 및 표준 DOM 속성이 지원됩니다.

React는 DOM에서 JavaScript 중심 API를 제공했습니다. 그리고 React 구성 요소에는 종종 사용자 정의 및 DOM 관련 소품이 포함되어 있으며 React는 DOM API와 동일한 CamelCase 규칙을 사용합니다.

 // Just like node.tabIndex DOM API // Just like node.className DOM API // Just like node.readOnly DOM API