반응에서 요소는 DOM이 아닌 가장 작은 건물 단위입니다. 요소는 jsx를 사용하여 코드에서 정의할 수 있으며 구문은 "const element =..."입니다. 요소를 만든 후에는 변경할 수 없습니다. DOM을 변경하려면 새 요소만 생성하면 됩니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.
요소
1.Element는 React에서 가장 작은 구성 단위이며 DOM이 아닌 객체이며 생성 비용이 상대적으로 저렴합니다.
(1) 일반적으로 JSX를 사용하여 코드에서 요소를 정의합니다.
const 요소 = <h1>안녕하세요, 세계</h1>;(2) ReactDOM.render를 사용하여 렌더링
ReactDOM.render( element, document.getElementById('root') );2. 요소는 한번 생성되면 변경할 수 없습니다. 마치 영화의 프레임과 같습니다. DOM 표시를 변경하려면 새 요소만 생성하면 됩니다.
3. React는 두 Elements 전후를 비교하여 업데이트가 필요한 내용만 업데이트합니다.
지식을 넓히세요:
가상 DOM
1. React는 DOM 요소를 직접 구성하지 않고 DOM 구조와 유사한 객체를 생성합니다. 그런 다음 실제 DOM은 React DOM인 이 구조를 기반으로 렌더링됩니다.
2. 변경사항이 있으면 새 객체를 생성하여 이전 구조와 비교하고 둘 사이의 차이점을 기록합니다. 여기에서 diff 알고리즘을 확인할 수 있습니다.
3. 그런 다음 기록된 차이를 기반으로 DOM이 업데이트됩니다.
반응요소
1. 가상 'DOM';
2. 본질은 불변의 대상이다.
type 속성: 'h1'과 같은 문자열이면 DOM 노드를 나타내고, props 속성은 DOM 노드의 속성을 나타내는 컴포넌트입니다.
함수나 클래스는 구성 요소를 나타냅니다.
3. 두 가지 유형의 ReactElement는 서로 중첩되고 혼합되어 DOM 트리를 설명할 수 있습니다.