react中元素和組件的區別：1、元素資料結構是普通對象，而組件資料結構是類別或純函數；2、在JSX中，被元素嵌套的元素會以屬性children的方式傳入該元素的組件。
react中元素與元件的差異：
##1、React 元素
React 元素（React element），它是React 中最小基本單位，我們可以使用JSX 語法輕鬆地創建一個React 元素:const element = <div className="element">I'm element</div>
{
_context: Object,
_owner: null,
key: null,
props: {
className: 'element'，
children: 'I'm element'
},
ref: null,
type: "div"
}getDOMNode() 。一般使用 React 提供的介面就足以應付需要 DOM 操作的場景了，因此像 jQuery 強大的選擇器在 React 中幾乎沒有用武之地了。
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>;
}3、元素與元件的差異
元件是由元素構成的。元素資料結構是普通對象，而元件資料結構是類別或純函數。除此之外，還有幾點差異要注意：this.props.children
在JSX 中，被元素嵌套的元素會以屬性children的方式傳入該元素的組件。當僅嵌套一個元素時，children 是一個 React 元素，當嵌套多個元素時，children 是一個 React 元素的陣列。可以直接把 children 寫入 JSX 的中，但如果要給它們傳入新屬性，就要用到React.cloneElement()來建立新的元素。我曾經放過以下錯誤:
render () {
var Child = this.props.children
return <div><Child tip={'error!'}/><div>
}render () {
var child = this.props.children
return <div>{ React.cloneElement(child, {tip: 'right way!'}) }<div>
}使用者元件
有的時候，元件可以讓使用者以屬性的方式傳入自訂的元件，來提升元件的彈性。這個屬性傳入的就應該是 React 元素，而非 React 元件。使用 React 元素可以讓使用者傳入自訂元件的同時，為元件新增屬性。同樣，可以使用React.cloneElement()為自訂元件添加更多屬性，或取代子元素。// 推荐
<MyComponent tick={
<UserComponent tip="Yes"/>
} />
// 不推荐
<MyComponent tick={ UserComponent } />。
######相關免費學習推薦：JavaScript（影片）
以上是react中元素和元件的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
