React 사용: React가 UI를 렌더링하는 방법

이 글에서는 React의 사용 방법을 소개합니다. React가 UI를 렌더링하는 방법에는 특정 참조 값이 있습니다. 도움이 필요한 친구는 이를 참조할 수 있습니다.

01. React가 인터페이스를 렌더링하는 방식

React와 같은 대형 프론트 엔드 프레임워크가 등장하기 전에는 UI 요소를 렌더링하는 방식이 이었습니다. 문자열 템플릿#🎜🎜 #. React에서는 JavaScript 객체 를 사용하여 UI 요소를 렌더링합니다.

이전 장에서 언급했듯이 React는 빈번한 DOM 작업으로 인해 소모되는 프런트 엔드 성능을 절약하기 위해

Virtual DOM 개념을 제안했습니다. 객체는 가상 DOM 노드 "페이지의 모양"을 설명하는 데 사용됩니다. "가상 DOM"은 어떻게 최종적으로 "실제 DOM"으로 변환되어 브라우저에 표시됩니까? 여기서 복잡한 작업(DOM 트리 조작, 노드 추가)은 React에 의해 수행됩니다.

먼저 JavaScript 개체를 통해 가상 DOM 노드(예: React 요소)를 생성하는 방법을 살펴보겠습니다.

// 为了创建一个 React 元素，我们需要使用 React.createElement API
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

API는 결국 다음 형식의 JavaScript를 반환합니다. 객체:

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

React는 생성된 가상 DOM 트리에서 이 JavaScript 객체에 대한 위치를 찾고 결국 브라우저의 실제 DOM 트리와 병합되어 뷰를 렌더링합니다.

하지만 실제 개발에서는 React.createElement API를 거의 사용하지 않고 다음과 같은 React 요소를 생성합니다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

React.createElement API，而是像下方这样创建 React 元素：

<p id="root"></p>

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

// 使用 ReactDOM.render API
ReactDOM.render(
  element,
  document.getElementById('root')
);

这种创建方式是通过一种叫做 JSX 的 JavaScript 语法扩展实现的，而对于 JSX 的概念在这里我就不再进一步阐述了，你大可以将它理解为一种简洁，高效创建 React 元素的语法糖，用来更加优雅的构建整个应用的虚拟 DOM。

值得一提的是，JSX 并不是 React 框架的一部分（这源于 React 代码组织上尽量分而治之的哲学），因此 React 并不像负责合并虚拟DOM与真实DOM那样，负责将由 JSX 语法写成的代码转化为使用了 React.createElement API 的 JavaScript 对象。

那谁来做这件事呢？答案是 Babel。而通常，我们使用 webpack 来打包我们的 JavaScript代码并输送至 Babel 进行转译。现在你明白了，为什么 React，webpack和Babel总是像连体婴儿一样出现在一起。

到目前为止，我们已经知道如何创建 React 元素了，但实际上我们只是“创建“而已，离元素被真正展现在浏览器上，还查了关键的一步”渲染“。

在这里我们加快脚步，想要将之前创建好的 React 元素渲染出来，我们需要使用如下代码：

import React form 'react'
import ReactDOM form 'react-dom'

function Button(props) {
    return <button>{props.buttonName}</button>
}

没错，id 为 root 이 생성물은 메소드는 JSX라는 JavaScript 구문 확장을 통해 구현됩니다. 여기서는 JSX의 개념에 대해 더 자세히 설명하지 않습니다. 이는 React 요소를 생성하기 위한 구문 설탕으로 이해될 수 있습니다. 간결하고 효율적으로 전체 애플리케이션의 가상 DOM을 보다 우아하게 구축하는 데 사용됩니다. JSX는 React 프레임워크의 일부가 아니라는 점을 언급할 가치가 있습니다(이는 React 코드 구성에서 최대한 분할하고 정복하려는 철학에서 비롯됨). 실제 DOM과 마찬가지로 DOM은 가상 병합을 담당하지 않습니다. DOM은 React.createElement API를 사용하여 JSX 구문으로 작성된 코드를 JavaScript 객체로 변환하는 일을 담당합니다.

그럼 누가 할 것인가? 정답은 바벨입니다. 일반적으로 우리는 webpack을 사용하여 JavaScript 코드를 패키징하고 번역을 위해 Babel로 보냅니다. 이제 React, webpack 및 Babel이 항상 샴 쌍둥이처럼 함께 나타나는 이유를 이해하게 되었습니다. 지금까지 우리는 이미 React 요소를 생성하는 방법을 알고 있지만 실제로는 요소가 실제로 브라우저에 표시되기 전에 "

create

"만 확인했습니다. "

렌더링

". 여기서는 이전에 생성된 React 요소를 렌더링하려면 다음 코드를 사용해야 합니다. rrreee예, ID는 root입니다. 의 DOM 요소는 전체 가상 DOM 트리의 루트 노드가 됩니다. 지금까지 우리는 React 요소를 가상 DOM 노드로 변환한 다음 브라우저에서 요소를 렌더링하는 전체 프로세스를 마스터했습니다. 그러나 단지 React를 사용하여 시각적 요소를 렌더링할 수 있다는 것만으로는 React의 가치를 실현하는 것과는 거리가 멀습니다. React는 대규모 프런트엔드 프레임워크로 존재한다는 점을 잊지 마세요(비록 다른 대규모 프런트엔드 프레임워크에 비해 구성 요소가 완전하지는 않지만). React의 실제 가치는 다음과 같습니다. React 요소 사용 다양한 복잡성을 간결하고 효율적으로 구현하는 비즈니스 로직 .

어떻게 해야 하나요? 답은 React 컴포넌트 를 사용하는 것입니다. 02. React 구성 요소

React 구성 요소는

다양한 시각적 요소를 패키지화할 수 있을 뿐만 아니라

다음 기능도 제공합니다. 패키지# 🎜🎜#해당하는 일련의 대화형 동작

. 이렇게 말할 수 있습니다:

React 구성 요소는 React 애플리케이션의

초석입니다.

그럼 React 컴포넌트

는 무엇인가요? React 구성 요소는 #🎜🎜#properties#🎜🎜#이라는 일련의 자료를 받고 궁극적으로 React 요소/구성 요소를 생성(반환)하는 공장과 같다고 상상할 수 있습니다. #🎜🎜##🎜🎜#다른 방식으로 말하자면, React 구성 요소는 본질적으로 일련의 매개 변수를 받고 React 요소/구성 요소를 반환하는 JavaScript 함수입니다. 어떻게 작성되었는지 살펴보겠습니다: #🎜🎜#rrreee#🎜🎜#See, React 구성 요소는 이전에 언급한 구성 요소화 아이디어를 완벽하게 준수하여 매개 변수를 받고 UI 요소를 반환합니다. #🎜🎜##🎜🎜# 컴포넌트 관점에서 React 애플리케이션 구축을 생각하는 것은 좋은 생각입니다. 컴포넌트화는 모듈화와 재사용성을 의미하기 때문입니다. 구성 요소 클래스는 구성 요소를 생산하는 공장의 인스턴스와 같습니다. 이러한 구성 요소 클래스는 "단일 응답 원칙" 및 "DOT" 원칙을 완전히 준수합니다. #🎜🎜##🎜🎜#React의 공식 문서에서 많은 양의 React API는 구성 요소에 관한 것입니다. 따라서 컴포넌트는 React에서 매우 중요한 개념입니다. 본질적으로 컴포넌트는 #🎜🎜#React가 제공하는 주요 캡슐화 단위입니다. 구성 요소를 통해 복잡한 상호 작용 논리와 빌딩 블록과 같은 시각적 인터페이스를 갖춘 대규모 애플리케이션을 빠르게 구축할 수 있으며 애플리케이션의 각 시각적 단위에는 매우 명확한 책임이 있습니다. #🎜🎜#

이제 대규모 애플리케이션을 구축할 때 React의 가치를 인식할 수 있기를 바랍니다. 이를 통해 실수로 애플리케이션의 나머지 부분에 영향을 주지 않고 애플리케이션의 작은 부분에 집중할 수 있습니다(즉, 각 구성 요소는 "높은 응집력, 낮은 결합" 원칙을 따릅니다). ). React를 사용하면 명확하고 우아한 코드를 작성하는 것이 더 쉽습니다.

03. 요약

마지막으로 React에서 인터페이스를 렌더링하기 위해 컴포넌트를 사용하는 것의 두 가지 장점을 다시 한 번 요약하겠습니다.

1. 재사용이 용이함: 언제 어디서나 컴포넌트를 호출할 수 있습니다.

편리한 사용자 정의
2. : 구성 요소에 다양한 속성을 부여하여 다양한 UI 요소를 얻을 수 있습니다.
   관련 권장 사항:

React 사용: React 프레임워크의 다섯 가지 주요 기능

Responsive React 네이티브 Echarts 구성요소 소개

위 내용은 React 사용: React가 UI를 렌더링하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!