JSX理念

jsx在編譯的時(shí)候會(huì)被babel編譯為react.createELement方法
在使用jsx的文件中，需要引入react。import React from "react"
jsx會(huì)被編譯為React.createElement,所有jsx的運(yùn)行結(jié)果都是react element

React Component

在react中，常使用classComponent和FunctionComponent來(lái)構(gòu)建組件

class AppClass extends React.Component {render() {return <p>classcomponent</p>	}
}
function AppFunc() {return <p>FunctionComponent</p>
}

ClassComponent 對(duì)應(yīng)的element的type為appclass functioncomponent對(duì)應(yīng)的element的type字段為appfunc本身。
所以無(wú)法通過(guò)引用類型區(qū)分ClassComponent和FunctionComponent。React通過(guò)ClassComponent實(shí)例原型上的isReactComponent變量判斷是否是ClassComponent。

jsx和fiber節(jié)點(diǎn)

jsx是描述組件當(dāng)前內(nèi)容的數(shù)據(jù)結(jié)構(gòu)，不包含schedule，reconcile，render所需要的信息。這些內(nèi)容包含在fiber節(jié)點(diǎn)中，所以在組件mount的時(shí)候，reconciler根據(jù)jsx描述的組件內(nèi)容生成組件對(duì)應(yīng)的fiber節(jié)點(diǎn)。在update時(shí)，reconciler將jsx和fiber節(jié)點(diǎn)保存到數(shù)據(jù)對(duì)比，生成組件對(duì)應(yīng)的fiber節(jié)點(diǎn)，并根據(jù)對(duì)比結(jié)果為fiber節(jié)點(diǎn)打標(biāo)記。