摘要：組件中有三種構(gòu)建組件的方式。元素與組件的區(qū)別組件是由元素構(gòu)成的。元素?cái)?shù)據(jù)結(jié)構(gòu)是普通對(duì)象，而組件數(shù)據(jù)結(jié)構(gòu)是類或純函數(shù)。使用才是操作元素的正確姿勢(shì)。使用元素可以讓用戶傳入自定義組件的同時(shí)，為組件添加屬性。

在初學(xué) React 的時(shí)候，分不清 React 組件和 React 元素，著實(shí)踩了一些坑。搞清楚 React 中什么是組件，什么是元素，既可以理清楚概念，也可以讓你避免一些不必要的錯(cuò)誤。

React 元素（React element），它是 React 中最小基本單位，我們可以使用 JSX 語(yǔ)法輕松地創(chuàng)建一個(gè) React 元素:

const element = 
I"m element

React 元素不是真實(shí)的 DOM 元素，它僅僅是 js 的普通對(duì)象（plain objects），所以也沒(méi)辦法直接調(diào)用 DOM 原生的 API。上面的 JSX 轉(zhuǎn)譯后的對(duì)象大概是這樣的：

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

只有在這個(gè)元素渲染被完成后，才能通過(guò)選擇器的方式獲取它對(duì)應(yīng)的 DOM 元素。不過(guò)，按照 React 有限狀態(tài)機(jī)的設(shè)計(jì)思想，應(yīng)該使用狀態(tài)和屬性來(lái)表述組件，要盡量避免 DOM 操作，即便要進(jìn)行 DOM 操作，也應(yīng)該使用 React 提供的接口ref和getDOMNode()。一般使用 React 提供的接口就足以應(yīng)付需要 DOM 操作的場(chǎng)景了，因此像 jQuery 強(qiáng)大的選擇器在 React 中幾乎沒(méi)有用武之地了。

除了使用 JSX 語(yǔ)法，我們還可以使用 React.createElement() 和 React.cloneElement() 來(lái)構(gòu)建 React 元素。

JSX 語(yǔ)法就是用React.createElement()來(lái)構(gòu)建 React 元素的。它接受三個(gè)參數(shù)，第一個(gè)參數(shù)可以是一個(gè)標(biāo)簽名。如div、span，或者 React 組件。第二個(gè)參數(shù)為傳入的屬性。第三個(gè)以及之后的參數(shù)，皆作為組件的子組件。

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

React.cloneElement()與React.createElement()相似，不同的是它傳入的第一個(gè)參數(shù)是一個(gè) React 元素，而不是標(biāo)簽名或組件。新添加的屬性會(huì)并入原有的屬性，傳入到返回的新元素中，而就的子元素獎(jiǎng)杯替換。

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

React 中有三種構(gòu)建組件的方式。React.createClass()、ES6 class和無(wú)狀態(tài)函數(shù)。

React.createClass()是三種方式中最早，兼容性最好的方法。在0.14版本前官方指定的組件寫(xiě)法。

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

ES6 class是目前官方推薦的使用方式，它使用了ES6標(biāo)準(zhǔn)語(yǔ)法來(lái)構(gòu)建，但它的實(shí)現(xiàn)仍是調(diào)用React.createClass()來(lái)實(shí)現(xiàn)了，ES6 class的生命周期和自動(dòng)綁定方式與React.createClass()略有不同。

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

無(wú)狀態(tài)函數(shù)是使用函數(shù)構(gòu)建的無(wú)狀態(tài)組件，無(wú)狀態(tài)組件傳入props和context兩個(gè)參數(shù)，它沒(méi)有state，除了render()，沒(méi)有其它生命周期方法。

function Greeting (props) {
  return 
Hello, {props.name}
;
}

React.createClass()和ES6 class構(gòu)建的組件的數(shù)據(jù)結(jié)構(gòu)是類，無(wú)狀態(tài)組件數(shù)據(jù)結(jié)構(gòu)是函數(shù)，它們?cè)?React 被視為是一樣的。

組件是由元素構(gòu)成的。元素?cái)?shù)據(jù)結(jié)構(gòu)是普通對(duì)象，而組件數(shù)據(jù)結(jié)構(gòu)是類或純函數(shù)。除此之外，還有幾點(diǎn)區(qū)別要注意：

在 JSX 中，被元素嵌套的元素會(huì)以屬性 children 的方式傳入該元素的組件。當(dāng)僅嵌套一個(gè)元素時(shí)，children 是一個(gè) React 元素，當(dāng)嵌套多個(gè)元素時(shí)，children 是一個(gè) React 元素的數(shù)組?？梢灾苯影?children 寫(xiě)入 JSX 的中，但如果要給它們傳入新屬性，就要用到React.cloneElement()來(lái)構(gòu)建新的元素。我曾放過(guò)以下錯(cuò)誤:

render () {
  var Child = this.props.children
  return 

}

因?yàn)?Child 是一個(gè) React 元素，而不是組件，這樣的寫(xiě)法是完全錯(cuò)誤的，正確的方式應(yīng)該是：

render () {
  var child = this.props.children
  return 
{ React.cloneElement(child, {tip: "right way!"}) }

}

就這樣，原有屬性和新添加的屬性被一并傳入了子元素。使用React.cloneElement()才是操作元素的正確姿勢(shì)。

有的時(shí)候，組件可以讓用戶以屬性的方式傳入自定義的組件，來(lái)提升組件的靈活性。這個(gè)屬性傳入的就應(yīng)該是 React 元素，而非 React 組件。使用 React 元素可以讓用戶傳入自定義組件的同時(shí)，為組件添加屬性。同樣，可以使用React.cloneElement()為自定義組件添加更多屬性，或替換子元素。

// 推薦

} />

// 不推薦

最后，打個(gè)不恰當(dāng)?shù)谋扔?，React 組件是MyComponent，React 元素就是。

新開(kāi)博客，更多文章，陸續(xù)更新中...