React の使用: React が UI をレンダリングする方法-jsチュートリアル-php.cn

この記事では、React の使用方法を紹介します。React が UI をレンダリングする方法には、必要な友人が参照できるようにするための値があります。

01. React がインターフェイスをレンダリングする方法

React のような大規模なフロントエンドフレームワークが登場する前は、UI 要素をレンダリングする方法は String テンプレート を使用することでした。 React では、JavaScript オブジェクト を使用して UI 要素をレンダリングします。

前の章で述べたように、React は、頻繁な DOM 操作によって消費されるフロントエンドのパフォーマンスを節約するために、仮想 DOM の概念を提案しました。ここで作成した JavaScript オブジェクトは、「ページがどのように見えるか」を記述するために使用されます。 " 仮想 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 はこの JavaScript を提供します生成された仮想 DOM ツリー内の場所を見つけて、最終的にブラウザ内の実際の 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 構文拡張機能が実装されています。ここでは、<code>JSX の概念については詳しく説明しません。これは、React 要素を作成するためのシンプルで効率的な方法として理解できます。アプリケーション全体の仮想 DOM をよりエレガントに構築します。 JSX は React フレームワークの一部ではないことに言及する価値があります (これは、React コード構成における可能な限り分割統治の哲学に由来しています)。そのため、React は、仮想 DOM と実際の DOM は、React.createElement API を使用して、JSX 構文で記述されたコードを JavaScript オブジェクトに変換します。

それでは誰がやるのでしょう？答えは バベル です。通常、webpack を使用して JavaScript コードをパッケージ化し、それを翻訳のために Babel に送信します。 React、webpack、Babel がシャム双生児のように常に一緒に表示される理由がわかりました。ここまでで、React 要素の作成方法はすでにわかりましたが、実際には要素が実際にブラウザーに表示される前に、重要なステップである「

レンダリング

」も確認します。

ここで、以前に作成した React 要素をレンダリングしたい場合は、次のコードを使用する必要があります: rrreeeはい、root の ID を持つ DOM 要素が全体になります。 virtual DOM ツリーのルートノード。これまでのところ、React 要素を仮想 DOM ノードに変換し、ブラウザ上で要素をレンダリングするプロセス全体を習得しました。ただし、React を使用して視覚要素をレンダリングできるだけでは、React の価値を実現することはできません。 React は大規模なフロントエンドフレームワークとして存在することを忘れないでください (ただし、他の大規模なフロントエンドフレームワークと比較すると、そのコンポーネントは完全ではありません)。 React の真の価値は次のとおりです。 React 要素を使用してさまざまな実装を行う。複雑なビジネスロジックを簡潔かつ効率的に処理します 。どうやってやるの？答えは、

React コンポーネント

を使用することです。 02. React コンポーネント React コンポーネントは、多数の視覚要素をパッケージ化する機能

を提供するだけでなく、対応する一連のインタラクティブな動作

をパッケージ化する機能も提供します。次のように言えます:

React コンポーネントは React アプリケーションの基礎です

。

では、

React コンポーネント

とは何ですか? React コンポーネントは、プロパティと呼ばれる一連のマテリアルを受け取り、最終的に React 要素/コンポーネントを生成 (返す) するファクトリーのようなものであると想像できます。

🎜別の言い方をすると、React コンポーネントは本質的に、一連のパラメーターを受け取り、React 要素/コンポーネントを返す JavaScript 関数です。どのように書かれているか見てみましょう: 🎜rrreee🎜ほら、React コンポーネントは、パラメータを受け取って UI 要素を返す、前に述べたコンポーネント化のアイデアに完全に準拠しています。 🎜🎜コンポーネント化はモジュール性と再利用性を意味するため、コンポーネントの観点から React アプリケーションの構築について考えることは素晴らしいアイデアです。コンポーネントクラスは、コンポーネントを生産する工場のインスタンスのようなもので、「単一応答原則」と「DOT」原則に完全に準拠しています。 🎜🎜 React の公式ドキュメントでは、React API の大部分がコンポーネントに関するものです。したがって、コンポーネントは React において非常に重要な概念です。本質的に、コンポーネントは 🎜React🎜 によって与えられる主要なカプセル化単位です。コンポーネントを使用すると、複雑な対話ロジックとビルディングブロックのようなビジュアルインターフェイスを備えた大規模なアプリケーションを迅速に構築でき、アプリケーション内の各ビジュアルユニットには非常に明確な責任があります。 🎜

大規模なアプリケーションを構築する際に React の価値を理解していただければ幸いです。React を使用すると、アプリケーションの残りの部分に誤って影響を与えることなく、アプリケーションの小さな部分に集中できます (つまり、各コンポーネントが「高結合、低結合」の原則に準拠します)。）。 React を使用すると、明確でエレガントなコードを簡単に作成できます。