宁波网站建设培训站长统计免费下载

JSX理念

jsx在编译的时候会被babel编译为react.createELement方法
在使用jsx的文件中，需要引入react。import React from "react"
jsx会被编译为React.createElement,所有jsx的运行结果都是react element

React Component

在react中，常使用classComponent和FunctionComponent来构建组件

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

ClassComponent 对应的element的type为appclass functioncomponent对应的element的type字段为appfunc本身。
所以无法通过引用类型区分ClassComponent和FunctionComponent。React通过ClassComponent实例原型上的isReactComponent变量判断是否是ClassComponent。

jsx和fiber节点

jsx是描述组件当前内容的数据结构，不包含schedule，reconcile，render所需要的信息。这些内容包含在fiber节点中，所以在组件mount的时候，reconciler根据jsx描述的组件内容生成组件对应的fiber节点。在update时，reconciler将jsx和fiber节点保存到数据对比，生成组件对应的fiber节点，并根据对比结果为fiber节点打标记。