반응 요소 란 무엇입니까?

반응에서 요소는 DOM이 아닌 가장 작은 건물 단위입니다. 요소는 코드에서 jsx를 사용하여 정의할 수 있으며 구문은 "const element =..."입니다. 요소는 생성된 후에 변경할 수 없습니다. 예, DOM을 변경하려면 새 요소만 생성할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

리액트 요소란

Element

1.Element는 React에서 가장 작은 구성 단위로 DOM이 아닌 객체이며 생성 비용이 상대적으로 저렴합니다.

(1) 일반적으로 코드에서 요소를 정의하기 위해 JSX를 사용합니다:

        const element = <h1>Hello, world</h1>;

(2) ReactDOM.render를 사용하여 렌더링

        ReactDOM.render( element, document.getElementById('root') );

2. 요소가 생성되면 변경할 수 없습니다. 마치 영화와 같습니다. 프레임에서 DOM 표시를 변경하려면 새 요소만 생성하면 됩니다.

3. React는 두 Elements 전후를 비교하여 업데이트가 필요한 내용만 업데이트합니다.

확장 지식:

Virtual DOM

1. React는 DOM 요소를 직접 구성하지 않고 DOM 구조와 유사한 객체를 생성합니다. 그런 다음 실제 DOM은 React DOM인 이 구조를 기반으로 렌더링됩니다.

2. 변경 사항이 있으면 새 객체를 생성하고 이전 구조와 비교하여 둘 사이의 차이점을 기록합니다. 여기서 diff 알고리즘을 볼 수 있습니다.

3. 그런 다음 기록된 차이를 기반으로 DOM을 업데이트합니다.

ReactElement

1. 가상 'DOM';

2. 기본적으로 불변 객체입니다.

type 속성: 'h1'과 같은 문자열인 경우 props 속성은 DOM 노드의 속성입니다. type 속성이 구성 요소를 나타내는 함수 또는 클래스인 경우

3 두 가지 유형의 ReactElement를 서로 중첩하여 혼합할 수 있습니다. DOM 트리

[관련 권장 사항:

javascript 비디오 튜토리얼

, 웹 프론트엔드]

위 내용은 반응 요소 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!