首頁 >web前端 >js教程 >react中元素和元件的差別是什麼

react中元素和元件的差別是什麼

coldplay.xixi
coldplay.xixi原創
2020-11-17 14:47:193480瀏覽

react中元素和組件的區別:1、元素資料結構是普通對象,而組件資料結構是類別或純函數;2、在JSX中,被元素嵌套的元素會以屬性children的方式傳入該元素的組件。

react中元素和元件的差別是什麼

react中元素與元件的差異:

##1、React 元素

React 元素(React element),它是React 中最小基本單位,我們可以使用JSX 語法輕鬆地創建一個React 元素:

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

React 元素不是真實的DOM 元素,它只是js的普通物件(plain objects),所以也沒辦法直接呼叫DOM 原生的API。上面的 JSX 轉譯後的物件大概是這樣的:

{
    _context: Object,
    _owner: null,
    key: null,
    props: {
    className: &#39;element&#39;,
    children: &#39;I&#39;m element&#39;
  },
    ref: null,
    type: "div"
}

只有在這個元素渲染完成後,才能透過選擇器的方式取得它對應的 DOM 元素。不過,依照React 有限狀態機的設計思想,應該使用狀態和屬性來表述元件,要盡量避免DOM 操作,即便要進行DOM 操作,也應該使用React 提供的介面ref和

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

相關免費學習推薦:JavaScript(影片)

######

以上是react中元素和元件的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

相關文章

看更多