React의 요소, 구성요소, 노드에 대한 자세한 설명

이 글은 주로 React의 요소, 컴포넌트, 노드를 소개하고 참고자료도 제공합니다.

React의 요소, 구성 요소, 인스턴스 및 노드는 React에서 밀접하게 관련된 네 가지 개념이며, React 초보자가 쉽게 혼동할 수 있는 네 가지 개념이기도 합니다. 이제 베테랑 간부들이 이 네 가지 개념과 이들 사이의 연관성과 차이점을 자세히 소개하여 말을 씹고 사물의 근본 원인을 파악하는 것을 좋아하는 학생들의 호기심을 충족시켜줄 것입니다(베테랑 간부가 그중 하나입니다).

Element(Element)

React 요소는 실제로 간단한 JavaScript 객체입니다. React 요소는 인터페이스의 DOM 부분에 해당하며 DOM의 이 부분의 구조와 렌더링 효과를 설명합니다. 일반적으로 우리는 JSX 구문을 통해 React 요소를 만듭니다. 예:

const element = <h1 id="Hello-nbsp-world">Hello, world</h1>;

element는 React 요소입니다. 컴파일 프로세스 중에 JSX 구문은 React.createElement()에 대한 호출로 컴파일됩니다. JSX 구문이 React 요소를 반환한다는 것도 함수 이름에서 볼 수 있습니다. 위 예제의 컴파일된 결과는 다음과 같습니다.

const element = React.createElement(
 'h1',
 {className: 'greeting'},
 'Hello, world!'
);

마지막으로 element의 값은 다음과 유사한 간단한 JavaScript 객체입니다.

const element = {
 type: 'h1',
 props: {
  className: 'greeting',
  children: 'Hello, world'
 }
}

React 요소는 DOM 유형 요소와 DOM 유형 요소의 두 가지 범주로 나눌 수 있습니다. 구성 요소 유형 요소. DOM 유형 요소는 h1, p, p 등과 같은 DOM 노드를 사용하여 React 요소를 생성합니다. 이전 예는 DOM 유형 요소를 사용하여 React 요소를 생성하는 것입니다. 컴포넌트 유형 요소의 경우 해당 값은 다음과 같습니다.

const buttonElement = <Button color=&#39;red&#39;>OK</Button>;

DOM 유형 요소의 경우 페이지의 DOM 노드에 직접 대응하기 때문에 React는 렌더링 방법을 알고 있습니다. 그러나 ButtonElement와 같은 컴포넌트 유형 요소의 경우 React는 ButtonElement가 어떤 종류의 페이지 DOM으로 렌더링되어야 하는지 직접 알 수 없습니다. 이 경우 컴포넌트 자체는 React가 인식할 수 있는 DOM 노드 정보를 제공해야 합니다. 자세한 소개는 구성 요소를 소개할 때 논의됩니다.

React 요소를 어떻게 사용해야 할까요? 실제로 대부분의 경우 React 요소를 직접 사용하지 않습니다. React는 내부적으로 React 요소를 기반으로 최종 페이지 DOM을 자동으로 렌더링합니다. 더 정확하게 말하면 React 요소는 React의 가상 DOM 구조를 설명하고, React는 가상 DOM을 기반으로 페이지의 실제 DOM을 렌더링합니다.

Component(Component)

React 컴포넌트는 React에서 가장 친숙한 개념일 것입니다. React는 컴포넌트 개념을 사용하여 인터페이스를 재사용 가능한 모듈로 분할합니다. 각 모듈은 React 컴포넌트입니다. React 애플리케이션은 여러 구성 요소로 구성되며 복잡한 구성 요소는 여러 간단한 구성 요소로 구성될 수도 있습니다.

React 구성 요소는 React 요소와 밀접한 관련이 있습니다. React 구성 요소의 핵심 기능은 React 요소를 반환하는 것입니다. 여기에 질문이 있을 수 있습니다. React 요소가 React.createElement()에 의해 반환되어서는 안 되나요? 그러나 React.createElement() 호출 자체에도 책임을 지는 "사람"이 필요하며, React 구성 요소는 이 "책임 있는 사람"입니다. React 구성 요소는 React.createElement()를 호출하고 React에 대한 React 요소를 반환하여 내부적으로 최종 페이지 DOM에 렌더링하는 역할을 합니다.

컴포넌트의 핵심 기능은 React 요소를 반환하는 것이므로 가장 간단한 컴포넌트는 React 요소를 반환하는 함수입니다.

const buttonElement = {
 type: 'Button',
 props: {
  color: 'red',
  children: 'OK'
 }
}

Welcome은 함수로 정의된 컴포넌트입니다. 클래스를 사용하여 구성 요소를 정의한 경우 React 요소를 반환하는 작업은 구성 요소의 렌더링 메서드에 의해 구체적으로 수행됩니다. 예:

function Welcome(props) {
 return <h1 id="Hello-nbsp-props-name">Hello, {props.name}</h1>;
}

실제로 클래스를 사용하여 정의된 구성 요소의 경우 렌더링 메서드가 유일한 작업입니다. 필수 방법 및 기타 구성 요소' 라이프 사이클 방법은 렌더링에만 사용되며 필수는 아닙니다.

이제 다음 예를 고려해 보세요.

class Welcome extends React.Component {
 render() {
  return <h1 id="Hello-nbsp-this-props-name">Hello, {this.props.name}</h1>;
 }
}

Home 구성 요소는 Welcome 구성 요소를 사용하고 반환된 React 요소는 다음과 같습니다.

class Home extends React.Component {
 render() {
  return (
   <p>
    <Welcome name=&#39;老干部&#39; />
    <p>Anything you like</p>
   </p>
  )
 }
}

이 구조의 경우 React는 type = 'p' 및 type을 렌더링하는 방법을 알고 있습니다. = 'p' 노드인데 type='Welcome'으로 노드를 렌더링하는 방법을 모르겠습니다. React가 Welcome이 React 컴포넌트임을 발견한 경우(판단은 Welcome의 첫 글자가 대문자라는 사실에 근거합니다) , Welcome 노드에서 반환된 React 요소를 기반으로 렌더링 방법을 결정합니다. Welcome 구성 요소에서 반환된 React 요소는 다음과 같습니다.

{
 type: 'p',
 props: {
  children: [
   {
    type: 'Welcome',
    props: {
     name: '老干部'
    }
   },
   {
    type: 'p',
    props: {
     children: 'Anything you like'
    }
   }，
  ]
 }
}

이 구조에는 DOM 노드만 포함되어 있으며 React는 렌더링 방법을 알고 있습니다. 이 구조에 다른 구성 요소 노드도 포함되어 있는 경우 React는 위 프로세스를 반복하고 반환된 React 요소에 DOM 노드만 포함될 때까지 해당 구성 요소에서 반환된 React 요소를 계속 구문 분석합니다. 이러한 재귀적 프로세스를 통해 React는 페이지의 전체 DOM 구조 정보를 얻을 수 있으며 렌더링 작업도 자연스럽게 이루어집니다.

그리고 잘 생각해보면 React 컴포넌트의 재사용은 본질적으로 이 컴포넌트에서 반환된 React 요소를 재사용하는 것임을 알 수 있습니다.

인스턴스

这里的实例特指React组件的实例。React 组件是一个函数或类，实际工作时，发挥作用的是React 组件的实例对象。只有组件实例化后，每一个组件实例才有了自己的props和state，才持有对它的DOM节点和子组件实例的引用。在传统的面向对象的开发方式中，实例化的工作是由开发者自己手动完成的，但在React中，组件的实例化工作是由React自动完成的，组件实例也是直接由React管理的。换句话说，开发者完全不必关心组件实例的创建、更新和销毁。

节点 (Node)

在使用PropTypes校验组件属性时，有这样一种类型：

MyComponent.propTypes = { 
 optionalNode: PropTypes.node,
}

PropTypes.node又是什么类型呢？这表明optionalNode是一个React 节点。React 节点是指可以被React渲染的数据类型，包括数字、字符串、React 元素，或者是一个包含这些类型数据的数组。例如：

// 数字类型的节点
function MyComponent(props) {
 return 1;
}

// 字符串类型的节点
function MyComponent(props) {
 return 'MyComponent';
}

// React元素类型的节点
function MyComponent(props) {
 return <p>React Element</p>;
}

// 数组类型的节点，数组的元素只能是其他合法的React节点
function MyComponent(props) {
 const element = <p>React Element</p>;
 const arr = [1, &#39;MyComponent&#39;, element];
 return arr;
}

// 错误，不是合法的React节点
function MyComponent(props) {
 const obj = { a : 1}
 return obj;
}

最后总结一下，React 元素和组件的概念最重要，也最容易混淆；React 组件实例的概念大家了解即可，几乎使用不到；React 节点有一定使用场景，但看过本文后应该也就不存在理解问题了。

相关推荐：

React中组件间抽象实例讲解

React中组件的写法有哪些

简单搭建一个react项目

위 내용은 React의 요소, 구성요소, 노드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!