JSX理念

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

React Component

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

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

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

jsx和fiber節(jié)點

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