共计 732 个字符，预计需要花费 2 分钟才能阅读完成。
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 节点打标记。
原文地址: react-JSX
正文完
