React の要素、コンポーネント、ノードの詳細な説明

この記事ではReactの要素、コンポーネント、ノードを中心に紹介しており、参考になれば幸いです。

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

Element (要素)

React 要素は実際には単純な JavaScript オブジェクトであり、インターフェイス上の DOM の一部に対応し、DOM のこの部分の構造とレンダリング効果を記述します。通常、JSX 構文を使用して React 要素を作成します。例:

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

要素は 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 タイプ要素と 2 つのカテゴリに分類できます。コンポーネント タイプ 要素。 DOM タイプの要素は、h1、p、p などの DOM ノードを使用して React 要素を作成します。前の例は DOM タイプの要素であり、コンポーネント タイプの要素は React コンポーネントを使用して 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 (コンポーネント)

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 id="Hello-nbsp-props-name">Hello, {props.name}</h1>;
}

実際、クラスを使用して定義されたコンポーネントの場合、render メソッドが唯一の必須メソッド、および他のコンポーネントのライフサイクル メソッドはレンダリング専用であり、必須ではありません。

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

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组件的实例。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 中国語 Web サイトの他の関連記事を参照してください。