首页 前端知识 react-JSX

react-JSX

2024-10-17 10:10:23 前端知识 前端哥 975 935 我要收藏

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节点打标记。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19069.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!