react element什么意思

react element是“React.createElement”函數(shù)的返回值，即ReactElement；ReactElement的結(jié)構(gòu)是“const element = {Element $$typeof: REACT_ELEMENT_TYPE,key: key,ref: ref,props: props,_owner: owner, };”。

本教程操作環(huán)境：Windows10系統(tǒng)、react16.9.0版、Dell G3電腦。

react element什么意思？

React源碼 | ReactElement

說(shuō)到ReactElement，不得不提到的就是在React中，用來(lái)替代JavaScript（JS）的語(yǔ)言，JSX。

JSX

作為React的官方指定語(yǔ)法，JSX允許用戶在JS代碼中插入HTML代碼。但是，這種寫法瀏覽器是無(wú)法解析的。他們需要一個(gè)轉(zhuǎn)換器，Babel就充當(dāng)了這樣一個(gè)角色，他在JSX代碼編譯時(shí)候?qū)⑵滢D(zhuǎn)換成JS文件，這樣瀏覽器就能解析了。

怎么轉(zhuǎn)換呢，我們知道，JSX有JS和HTMl兩種寫法，本身就是JS寫法的其實(shí)是不需要轉(zhuǎn)換的，當(dāng)然也不能說(shuō)的這么絕對(duì)，有時(shí)候Babel會(huì)為了兼容性的緣故將高版本的語(yǔ)法翻譯到低版本，這部分不在討論范圍。我們要關(guān)注的其實(shí)是HTMl的處理方式。

比如下面這行代碼：

<div id='name'>Tom and Jerry</div>

通過(guò)Babel轉(zhuǎn)換后生成的代碼是：

React.createElement("div", {     id: "name"}, "Tom and Jerry");

HTML語(yǔ)法轉(zhuǎn)變成了JS語(yǔ)法，簡(jiǎn)單來(lái)說(shuō)，我們所寫的JSX最終變成了JS。

我們寫一個(gè)復(fù)雜點(diǎn)的例子：

<div class='wrapper' id='id_wrapper'>     <span>Tom</span>     <span>Jerry</span></div>React.createElement("div", {     class: "wrapper",     id: "id_wrapper" }, React.createElement("span", null, "Tom"), React.createElement("span", null, "Jerry"));

轉(zhuǎn)換規(guī)則是比較簡(jiǎn)單的，React.createElement的第一個(gè)參數(shù)是節(jié)點(diǎn)類型；第二個(gè)參數(shù)是該節(jié)點(diǎn)的屬性，以key：value的形式作為一個(gè)對(duì)象，后面的所有參數(shù)都是該節(jié)點(diǎn)的子節(jié)點(diǎn)。

需要注意的是，在JSX語(yǔ)法中，我們不僅有原生的HTML節(jié)點(diǎn)，還有大量的自定義組件，比如：

function Comp() {     return '<div>Tom and Jerry</div>' }  <Comp></Comp> function Comp() {     return '<div>Tom and Jerry</div>'; }  React.createElement(Comp, null);

可以看出，React.createElement的第一個(gè)參數(shù)變成了一個(gè)變量，而不是一個(gè)字符串，嘗試將函數(shù)Comp首字母小寫：

function comp() {     return '<div>Tom and Jerry</div>' }  <comp></comp> function comp() {     return '<div>Tom and Jerry</div>'; }  React.createElement("comp", null);

React.createElement的第一個(gè)參數(shù)又變成了一個(gè)字符串。
這也就是我們?cè)赗eact中寫組件的時(shí)候，為什么會(huì)要求首字母大寫的原因，Babel在編譯的時(shí)候會(huì)將首字母小寫的組件視為原生的HTMl節(jié)點(diǎn)進(jìn)行處理，如果我們將自定義組件首字母小寫，后續(xù)的程序?qū)o(wú)法識(shí)別這個(gè)組件，最終會(huì)報(bào)錯(cuò)。

ReactElement

通過(guò)Babel編譯后的JS代碼，頻繁出現(xiàn)React.createElement這個(gè)函數(shù)。這個(gè)函數(shù)的返回值就是ReactElement，通過(guò)上面的示例可以看出，React.createElement函數(shù)的入?yún)⒂腥齻€(gè)，或者說(shuō)三類。

• type
  type指代這個(gè)ReactElement的類型。

• 字符串比如div，p代表原生DOM，稱為HostComponent

• Class類型是我們繼承自Component或者PureComponent的組件，稱為ClassComponent

• 方法就是functional Component

• 原生提供的Fragment、AsyncMode等是Symbol，會(huì)被特殊處理

• config
  參照上面Babel編譯后的代碼，所有節(jié)點(diǎn)的屬性都會(huì)以Key:Value的形式放到config對(duì)象中。

• children
  子節(jié)點(diǎn)不止會(huì)有一個(gè)，所以children不只有一個(gè)，從第二個(gè)參數(shù)以后的所有參數(shù)都是children，它是一個(gè)數(shù)組。

ReactElement的結(jié)構(gòu)是這樣的

const element = {     // This tag allows us to uniquely identify this as a React Element    $$typeof: REACT_ELEMENT_TYPE,      // Built-in properties that belong on the element    type: type,     key: key,     ref: ref,     props: props,      // Record the component responsible for creating this element.    _owner: owner,   };

它就是一個(gè)簡(jiǎn)單的對(duì)象，為了看清楚這個(gè)對(duì)象的創(chuàng)建規(guī)則，我們舉個(gè)例子。 首先是我們寫的JSX：

<div class='class_name' id='id_name' key='key_name' ref='ref_name'>     <span>Tom</span>     <span>Jerry</span> </div>

它會(huì)被Babel編譯為：

React.createElement("div", {     class: "class_name",     id: "id_name",     key: "key_name",     ref: "ref_name"}, React.createElement("span", null, "Tom"), React.createElement("span", null, "Jerry"));

它會(huì)生成這樣一個(gè)Element

{     $$typeof: REACT_ELEMENT_TYPE,     type：'div'，     key: 'key_name',     ref: "ref_name",     props: {         class: "class_name",         id: "id_name",         children: [             React.createElement("span", null, "Tom"),             React.createElement("span", null, "Jerry")         ]     }      _owner: ReactCurrentOwner.current,}

• $$typeof 是一個(gè)常量，所有通過(guò)React.createElement生成的元素都有這個(gè)值。一般使用 React 的組件都是掛到父組件的 this.props.children 上面，但是也有例外，比如要實(shí)現(xiàn)一個(gè)模態(tài)框，就需要將模態(tài)框掛載到body節(jié)點(diǎn)下，這個(gè)時(shí)候需要使用ReactDOM.createPortals(child, container)這個(gè)函數(shù)實(shí)現(xiàn)，這個(gè)函數(shù)生成的$$typeof值就是REACT_PORTAL_TYPE。

• type指代這個(gè)ReactElement的類型

• key和ref都是從config對(duì)象中找到的特殊配置，將其單獨(dú)抽取出來(lái)，放在ReactElement下

• props包含了兩部分，第一部分是去除了key和ref的config，第二部分是children數(shù)組，數(shù)組的成員也是通過(guò)React.createElement生成的對(duì)象，示例中省略了這個(gè)步驟。

• _owner在16.7的版本上是Fiber，F(xiàn)iber是react16+版本的核心，暫時(shí)不做深究。

通過(guò)這篇文章，我們了解到，JSX中的HTML節(jié)點(diǎn)，在Babel的幫助下，轉(zhuǎn)換為嵌套的ReactElement對(duì)象，這些信息對(duì)于后期構(gòu)建應(yīng)用的樹結(jié)構(gòu)時(shí)非常重要的，而React通過(guò)提供這些類型的數(shù)據(jù)，來(lái)脫離平臺(tái)的限制。

推薦學(xué)習(xí)：《react視頻教程》