React에서 요소, 구성 요소, 인스턴스 및 노드를 사용하는 방법-JS 튜토리얼-php.cn

이번에는 React에서 Element, Component, Instance, Node를 어떻게 사용하는지 보여드리겠습니다. React에서 Element, Component, Instance, Node를 사용할 때 Notes란 무엇인가요?

React 심층 시리즈는 모든 사람이 React에 대한 이해를 심화하고 프로젝트에서 React를 보다 유연하게 사용할 수 있도록 돕기 위해 React의 주요 개념, 기능 및 패턴에 대한 심층적인 설명을 제공합니다.

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

Element(요소)

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

const element = <h1 className=&#39;greeting&#39;>Hello, world</h1>;

로그인 후 복사

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

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

로그인 후 복사

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

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

로그인 후 복사

React 요소는 DOM 유형 요소와 구성 요소 유형 요소의 두 가지 범주로 나눌 수 있습니다. DOM 유형 요소는 h1, p, p 등과 같은 DOM 노드를 사용하여 React 요소를 생성합니다. 이전 예는 DOM 유형 요소를 사용하여 React 요소를 생성합니다. 예:

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

로그인 후 복사

buttonElement는 구성 요소입니다. type.element의 값은 다음과 같습니다.

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

로그인 후 복사

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 요소를 반환하는 함수입니다.

function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}

로그인 후 복사

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

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

로그인 후 복사

실제로 클래스를 사용하여 정의된 구성 요소의 경우 render 메서드만 필요합니다. 다른 구성 요소의 수명 주기 이 메서드는 렌더링에만 사용되며 필수는 아닙니다.

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

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

로그인 후 복사

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

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

로그인 후 복사

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

{
 type: 'h1',
 props: {
  children: 'Hello, 老干部'
 }
}

로그인 후 복사

这个结构中只包含DOM节点，React是知道如何渲染的。如果这个结构中还包含其他组件节点，React 会重复上面的过程，继续解析对应组件返回的React 元素，直到返回的React 元素中只包含DOM节点为止。这样的递归过程，让React 获取到页面的完整DOM结构信息，渲染的工作自然就水到渠成了。

另外，如果仔细思考的话，可以发现，React 组件的复用，本质上是为了复用这个组件返回的React 元素，React 元素是React 应用的最基础组成单位。

实例 (Instance）

这里的实例特指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, 'MyComponent', element];
 return arr;
}
// 错误，不是合法的React节点
function MyComponent(props) {
 const obj = { a : 1}
 return obj;
}

로그인 후 복사

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！