React の要素とコンポーネントの違いは何ですか

react における要素とコンポーネントの違い: 1. 要素のデータ構造は通常のオブジェクトですが、コンポーネントのデータ構造はクラスまたは純粋な関数です; 2. JSX では、要素によってネストされた要素には、この要素のコンポーネントに渡すattribute Childrenメソッド。

#react の要素とコンポーネントの違い:

#1. React 要素

React 要素 (React 要素) は、React の最小の基本単位です。JSX 構文を使用して React 要素を簡単に作成できます:

const element = <div className="element">I&#39;m element</div>

React 要素は実際の DOM 要素ではありません。単なる js プレーン オブジェクトであるため、DOM ネイティブ API を直接呼び出す方法はありません。上記の JSX 変換されたオブジェクトは、おそらく次のようになります。

{
    _context: Object,
    _owner: null,
    key: null,
    props: {
    className: 'element'，
    children: 'I'm element'
  },
    ref: null,
    type: "div"
}

この要素のレンダリングが完了した後でのみ、対応する DOM 要素をセレクターを通じて取得できます。ただし、React の有限ステートマシンの設計思想によれば、コンポーネントは状態と属性を使用して表現されるべきであり、DOM 操作は可能な限り回避されるべきであり、DOM 操作を実行する場合でも、インターフェイス ref と ## React が提供する #getDOMNode()

を使用する必要があります。一般に、DOM 操作が必要なシナリオには React が提供するインターフェイスを使用するだけで十分に対応できるため、React には jQuery のような強力なセレクターの余地がほとんどありません。 JSX 構文の使用に加えて、

React.createElement()

および React.cloneElement() を使用して React 要素を構築することもできます。

React.createElement()

JSX 構文では、

React.createElement()

を使用して React 要素を構築します。 3 つのパラメータを受け入れます。最初のパラメータはタグ名にすることができます。 div、span、React コンポーネントなど。 2 番目のパラメーターは、渡される属性です。 3 番目以降のパラメータはすべてコンポーネントのサブコンポーネントです。 <pre class='brush:php;toolbar:false;'>React.createElement( type, [props], [...children] )</pre>

React.cloneElement()

React.cloneElement() は React.createElement() に似ていますが、渡される最初のパラメーターが React 要素である点が異なります。タグ名やコンポーネントではありません。新しく追加された属性は元の属性にマージされ、返された新しい要素に渡され、子要素は置き換えられます。

React.cloneElement(
  element,
  [props],
  [...children]
)

2. React コンポーネント

React でコンポーネントを構築するには 3 つの方法があります。 React.createClass()、ES6 クラスおよびステートレス関数。

React.createClass()

React.createClass() は、3 つのメソッドの中で最も古く、最も互換性のあるメソッドです。バージョン 0.14 より前で正式に指定されたコンポーネントの記述方法。

var Greeting = React.createClass({
  render: function() {
    return <h1 id="Hello-nbsp-this-props-name">Hello, {this.props.name}</h1>;
  }
});

ES6 クラス

ES6 クラスは、現在公式に推奨されている使用方法です。ビルドには ES6 標準構文を使用しますが、その実装では依然として

React が呼び出されます。 .createClass()

が実装されていますが、ES6 クラスのライフサイクルや自動バインド方法は React.createClass() とは少し異なります。 <pre class='brush:php;toolbar:false;'>class Greeting extemds React.Component{ render: function() { return &lt;h1 id=&quot;Hello-nbsp-this-props-name&quot;&gt;Hello, {this.props.name}&lt;/h1&gt;; } };</pre>

ステートレス関数

ステートレス関数は、関数を使用して構築されたステートレス コンポーネントです。ステートレス コンポーネントは、props と context という 2 つのパラメーターを渡します。状態はありません。render を除く()、他のライフサイクルメソッドはありません。

function Greeting (props) {
  return <h1 id="Hello-nbsp-props-name">Hello, {props.name}</h1>;
}

React.createClass()とES6クラスで構築されるコンポーネントのデータ構造はクラス、ステートレスコンポーネントのデータ構造は関数であり、Reactでは同じものとして扱われます。

3. 要素とコンポーネントの違い

コンポーネントは要素で構成されます。要素のデータ構造は通常のオブジェクトですが、コンポーネントのデータ構造はクラスまたは純粋な関数です。さらに、注意すべき相違点がいくつかあります。

this.props.children

JSX では、要素によってネストされた要素は属性 child を持ちます。要素が渡されます。要素が 1 つだけネストされている場合、子は React 要素になり、複数の要素がネストされている場合、子は React 要素の配列になります。子を JSX に直接書き込むこともできますが、子に新しい属性を渡したい場合は、

React.cloneElement()

を使用して新しい要素を構築する必要があります。私はかつて次のエラーを手放しました: <pre class='brush:php;toolbar:false;'>render () { var Child = this.props.children return &lt;div&gt;&lt;Child tip={&amp;#39;error!&amp;#39;}/&gt;&lt;div&gt; }</pre>Child は React 要素であり、コンポーネントではないため、この書き方は完全に間違っています。正しい方法は次のとおりです:

render () {
  var child = this.props.children
  return <div>{ React.cloneElement(child, {tip: &#39;right way!&#39;}) }<div>
}

That's itの場合、元の既存の属性と新しく追加された属性が一緒に子要素に渡されます。 React.cloneElement() を使用することが要素を操作する正しい方法です。

ユーザー コンポーネント

コンポーネントの柔軟性を向上させるために、コンポーネントではユーザーが属性の形式でカスタム コンポーネントを渡すことができる場合があります。この属性は、React コンポーネントではなく React 要素で渡す必要があります。 React 要素を使用すると、ユーザーはカスタム コンポーネントを渡し、同時にコンポーネントにプロパティを追加できます。同様に、React.cloneElement() を使用して、カスタム コンポーネントにプロパティを追加したり、子要素を置き換えたりすることができます。

// 推荐
<MyComponent tick={
  <UserComponent tip="Yes"/>
} />
 
// 不推荐
<MyComponent tick={ UserComponent } />

Finally

最後に、不適切なたとえとして、React コンポーネントは MyComponent で、React 要素は

です。

関連する無料学習の推奨事項:

JavaScript(ビデオ)

以上がReact の要素とコンポーネントの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。