React での要素、コンポーネント、インスタンス、ノードの使用方法

今回は React での要素、コンポーネント、インスタンス、ノードの使い方について説明します。 React で要素、コンポーネント、インスタンス、ノードを使用する際の 注意事項 とは何ですか? 実践的なケースを見てみましょう。

React の詳細シリーズでは、React の主要な概念、機能、パターンを詳しく説明し、誰もが React について理解を深め、プロジェクトで React をより柔軟に使用できるようにすることを目的としています。

React の要素、コンポーネント、インスタンス、ノードは、React の 4 つの密接に関連した概念であり、React 初心者が混乱しやすい 4 つの概念でもあります。ここで、ベテラン幹部が、言葉を噛み砕いて物事の本質を理解したい学生の好奇心を満たすために、これら 4 つの概念とそれらの関係と違いを詳しく紹介します (ベテラン幹部もその 1 人です)。

Element (要素)

React 要素は、実際には単純な

JavaScript オブジェクト であり、インターフェイス上の 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!'
);

最後に、 element の値は、次のような単純な JavaScript オブジェクトです。

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

React 要素は、DOM タイプの要素とコンポーネント タイプの要素の 2 つのカテゴリに分類できます。 DOM タイプの要素は、h1、p、p などの DOM ノードを使用して React 要素を作成します。前の例は DOM タイプの要素であり、コンポーネント タイプの要素は React コンポーネントを使用して React 要素を作成します。 type Element、その値は次のとおりです:

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 (コンポーネント)

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 要素を返す作業は、具体的にはコンポーネントの render メソッドによって実行されます。たとえば:

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

実際、クラスを使用して定義されたコンポーネントの場合、必要なのは render メソッドだけです。メソッド、および

他のコンポーネントのライフ サイクル

メソッドはレンダリング専用であり、必須ではありません。

次の例を考えてみましょう:

class Welcome extends React.Component {
 render() {
  return <h1>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 ノードをレンダリングします。 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中文网其它相关文章！

推荐阅读：

JS怎样操作改变radio的状态

bootstrap table怎样设置为高度百分比

以上がReact での要素、コンポーネント、インスタンス、ノードの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。