Was ist der Unterschied zwischen Elementen und Komponenten in React

Der Unterschied zwischen Elementen und Komponenten in React: 1. Die Elementdatenstruktur ist ein normales Objekt, während die Komponentendatenstruktur eine Klasse oder reine Funktion ist. 2. In JSX werden durch Elemente verschachtelte Elemente als an das Element übergeben das Attribut children Die Komponente des Elements.

Der Unterschied zwischen Elementen und Komponenten in React:

1. React-Element

React-Element (React-Element), die kleinste Grundeinheit in React, können wir ganz einfach mit JSX erstellen Syntax React-Element:

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

React-Element ist kein echtes DOM-Element, es ist nur ein einfaches Objekt von js, daher gibt es keine Möglichkeit, die native DOM-API direkt aufzurufen. Das obige JSX-übersetzte Objekt sieht folgendermaßen aus:

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

Erst nachdem das Rendern dieses Elements abgeschlossen ist, kann das entsprechende DOM-Element über den Selektor abgerufen werden. Gemäß der Entwurfsidee der Finite-State-Maschine von React sollten Komponenten jedoch mithilfe von Zuständen und Attributen ausgedrückt werden, und DOM-Operationen sollten so weit wie möglich vermieden werden. Auch wenn DOM-Operationen ausgeführt werden sollen, sind die Schnittstellen ref und getDOMNode()von React bereitgestellte Code sollte verwendet werden. Im Allgemeinen reicht die Verwendung der von React bereitgestellten Schnittstelle aus, um Szenarien zu bewältigen, die eine DOM-Manipulation erfordern. Daher haben leistungsstarke Selektoren wie jQuery in React fast keinen Platz. <code>getDOMNode()。一般使用 React 提供的接口就足以应付需要 DOM 操作的场景了，因此像 jQuery 强大的选择器在 React 中几乎没有用武之地了。

除了使用 JSX 语法，我们还可以使用 React.createElement() 和 React.cloneElement() 来构建 React 元素。

React.createElement()

JSX 语法就是用React.createElement()来构建 React 元素的。它接受三个参数，第一个参数可以是一个标签名。如div、span，或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数，皆作为组件的子组件。

React.createElement(
    type,
    [props],
    [...children]
)

React.cloneElement()

React.cloneElement()与React.createElement()相似，不同的是它传入的第一个参数是一个 React 元素，而不是标签名或组件。新添加的属性会并入原有的属性，传入到返回的新元素中，而就的子元素奖杯替换。

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

2、React 组件

React 中有三种构建组件的方式。React.createClass()、ES6 class和无状态函数。

React.createClass()

React.createClass()是三种方式中最早，兼容性最好的方法。在0.14版本前官方指定的组件写法。

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

ES6 class

ES6 class是目前官方推荐的使用方式，它使用了ES6标准语法来构建，但它的实现仍是调用React.createClass()来实现了，ES6 class的生命周期和自动绑定方式与React.createClass()略有不同。

class Greeting extemds React.Component{
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
};

无状态函数

无状态函数是使用函数构建的无状态组件，无状态组件传入props和context两个参数，它没有state，除了render()，没有其它生命周期方法。

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

React.createClass()和ES6 class构建的组件的数据结构是类，无状态组件数据结构是函数，它们在 React 被视为是一样的。

3、元素与组件的区别

组件是由元素构成的。元素数据结构是普通对象，而组件数据结构是类或纯函数。除此之外，还有几点区别要注意：

this.props.children

在 JSX 中，被元素嵌套的元素会以属性 children 的方式传入该元素的组件。当仅嵌套一个元素时，children 是一个 React 元素，当嵌套多个元素时，children 是一个 React 元素的数组。可以直接把 children 写入 JSX 的中，但如果要给它们传入新属性，就要用到React.cloneElement()来构建新的元素。我曾放过以下错误:

render () {
  var Child = this.props.children
  return <div><Child tip={&#39;error!&#39;}/><div>
}

因为 Child 是一个 React 元素，而不是组件，这样的写法是完全错误的，正确的方式应该是：

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

就这样，原有属性和新添加的属性被一并传入了子元素。使用React.cloneElement()才是操作元素的正确姿势。

用户组件

有的时候，组件可以让用户以属性的方式传入自定义的组件，来提升组件的灵活性。这个属性传入的就应该是 React 元素，而非 React 组件。使用 React 元素可以让用户传入自定义组件的同时，为组件添加属性。同样，可以使用React.cloneElement()为自定义组件添加更多属性，或替换子元素。

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

最后

最后，打个不恰当的比喻，React 组件是MyComponent，React 元素就是c91df85aa2a01a1e069f702d655e9491

Zusätzlich zur Verwendung der JSX-Syntax können wir auch React.createElement() und React.cloneElement() verwenden, um React-Elemente zu erstellen.

React.createElement()JSX-Syntax besteht darin, React.createElement() zum Erstellen von React-Elementen zu verwenden. Es akzeptiert drei Parameter, der erste Parameter kann ein Tag-Name sein. Zum Beispiel div, span oder React-Komponente. Der zweite Parameter ist das übergebene Attribut. Der dritte und die folgenden Parameter sind alle Unterkomponenten der Komponente. rrreeeReact.cloneElement()

React.cloneElement() ähnelt React.createElement(), außer dass der erste Parameter, den es übergibt, ein React-Element anstelle eines Tag-Namens oder einer Komponente ist. Die neu hinzugefügten Attribute werden mit den ursprünglichen Attributen zusammengeführt und an das zurückgegebene neue Element übergeben, und die untergeordneten Elemente werden ersetzt. 🎜rrreee🎜🎜2. React-Komponenten🎜🎜🎜Es gibt drei Möglichkeiten, Komponenten in React zu erstellen. React.createClass(), ES6-Klassen und zustandslose Funktionen. 🎜🎜React.createClass()🎜🎜React.createClass() ist die früheste und kompatibelste Methode unter den drei Methoden. Die offiziell festgelegte Methode zum Schreiben von Komponenten vor Version 0.14. 🎜rrreee🎜🎜ES6-Klasse🎜🎜🎜Die ES6-Klasse ist derzeit die offiziell empfohlene Art, sie zu verwenden. Sie wird mit der ES6-Standardsyntax erstellt, ihre Implementierung wird jedoch weiterhin durch Aufrufen von React.createClass() erreicht. Der Lebenszyklus und die automatische Bindungsmethode der ES6-Klasse unterscheiden sich geringfügig von React.createClass(). 🎜rrreee🎜🎜Zustandslose Funktion🎜🎜🎜Eine zustandslose Funktion ist eine zustandslose Komponente, die aus Funktionen besteht. Die zustandslose Komponente übergibt zwei Parameter: Requisiten und Kontext. Sie hat keinen Status und keine anderen Lebenszyklusmethoden außer render(). 🎜rrreee🎜Die Datenstruktur der von React.createClass() und der ES6-Klasse erstellten Komponenten ist eine Klasse, und die Datenstruktur zustandsloser Komponenten ist eine Funktion. Sie werden in React als gleich betrachtet. 🎜🎜🎜3. Der Unterschied zwischen Elementen und Komponenten🎜🎜🎜Komponenten bestehen aus Elementen. Elementdatenstrukturen sind gewöhnliche Objekte, während Komponentendatenstrukturen Klassen oder reine Funktionen sind. Darüber hinaus sind einige Unterschiede zu beachten: 🎜🎜🎜this.props.children🎜🎜🎜In JSX werden von Elementen verschachtelte Elemente als Attributkinder an die Komponente des Elements übergeben. Wenn nur ein Element verschachtelt ist, ist „Children“ ein React-Element, und wenn mehrere Elemente verschachtelt sind, ist „Children“ ein Array von React-Elementen. Sie können Kinder direkt in JSX schreiben, aber wenn Sie ihnen neue Attribute übergeben möchten, müssen Sie React.cloneElement() verwenden, um neue Elemente zu erstellen. Ich habe den folgenden Fehler einmal losgelassen:🎜rrreee🎜Weil Child ein React-Element ist, keine Komponente. Diese Schreibweise sollte völlig falsch sein:🎜rrreee🎜Auf diese Weise werden die ursprünglichen Attribute und die neuen hinzugefügte Attribute sind Die untergeordneten Elemente werden ebenfalls übergeben. Die Verwendung von React.cloneElement() ist die richtige Methode zum Bearbeiten von Elementen. 🎜🎜🎜Benutzerkomponenten🎜🎜🎜Manchmal können Benutzer mit Komponenten benutzerdefinierte Komponenten in Form von Attributen übergeben, um die Flexibilität der Komponente zu verbessern. Dieses Attribut sollte in React-Elementen übergeben werden, nicht in React-Komponenten. Durch die Verwendung von React-Elementen können Benutzer benutzerdefinierte Komponenten übergeben und gleichzeitig Eigenschaften zu den Komponenten hinzufügen. Ebenso können Sie React.cloneElement() verwenden, um einer benutzerdefinierten Komponente weitere Eigenschaften hinzuzufügen oder untergeordnete Elemente zu ersetzen. 🎜rrreee🎜Endlich🎜🎜Um eine unangemessene Analogie zu ziehen: Die React-Komponente ist MyComponent und das React-Element ist c91df85aa2a01a1e069f702d655e9491. 🎜🎜🎜🎜Verwandte kostenlose Lernempfehlungen: 🎜🎜🎜JavaScript🎜🎜🎜(Video)🎜🎜🎜

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Elementen und Komponenten in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!