当前位置: 首页 > article >正文

react-JSX

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


http://www.kler.cn/news/353998.html

相关文章:

  • 《沈阳工业大学学报》
  • Spring Boot动态数据源切换功能详解
  • 群晖前面加了雷池社区版,安装失败,然后无法识别出用户真实访问IP
  • React中的函数组件与类组件
  • 【Bug】docker容器之间网络通讯失败
  • 在vue中v-show不起作用
  • Axure重要元件三——中继器表单制作
  • 图书管理智能化:Spring Boot进销存系统
  • Spring如何通过三级缓存解决循环依赖的问题
  • 5G对无人机的影响!
  • 简述RESTFul风格的API接口
  • 【Git】基本操作+分支管理
  • 探索社交网络中的情感脉动 | 微博评论舆情分析系统
  • Cesiumlab发布3dtiles白膜流程与前端可视化加载
  • 基于SpringBoot的课程辅助教学系统
  • 信息收集笔记
  • 基于卷积神经网络的蔬菜识别系统,resnet50,mobilenet模型【pytorch框架+python源码】
  • 安装mysql 5.5.62
  • 【人工智能】实验室GPU资源申请使用
  • 视频云存储/音视频流媒体视频平台EasyCVR视频汇聚平台在欧拉系统中启动失败是什么原因?