什么是 JSX
JSX 即 JavaScript XML——一种在 React 组件内部构建标签的类 xml 语法。React 在不使用 JSX 的情况下一样可以工作,然而使用 JSX 可以提高组件的可读性,因此推荐你使用 jsx。
举个例子,在不使用 jsx 的 React 程序中创建一个标题的函数调用大概是这样:
//v0.11
React.Dom.h1({className:'question'},'Questions');
//v0.12
React.createElement('h1',{className:'question'},'Question');
如果使用了JSX,上述调用就变成了下面这种更熟悉且简练的标签;
<h1 className="question">Question</h1>
与以往在 JavaScript 中嵌入 HTML 标签的几种方式相比,jsx 有如下几点明显的特征;
1.jsx 是一种句法变换——每一个 JSX 节点都对应着一个 JavaScript 函数;
2.JSX 既不提供也不需要运行时库;
3.JSX 并没有改变或添加 JavaScript 的语义——他只是简单的函数调用而已。
与 HTML 相似之处赋予了 JSX 在 React 中的强大的表现力。
什么是 JSX的更多相关文章
- React的使用与JSX的转换
前置技能:Chrome浏览器 一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...
- React Native JSX value should be expression or a quoted JSX text.
问题描述: 我在使用props时候, 我的写法是这样的 ... <View> <Person name='john' age=32 gender=true></Pers ...
- React反模式 —— 如何不使用JSX地动态显示组件
欢迎指导与讨论 : ) 前言 文章的最后能写出以 Modal.open( ) 这种调用形式,动态显示React对话框组件的写法(类似于ant design),同时涉及数据交互(数据能异步地返回给调用者 ...
- 深入理解JSX
本文由笔者翻译自官方文档的JSX In Depth,若干案例经过了改写.其实说白了也好像不算太深入,但还是提示了一些可能的盲区. JSX是为构造React元素方法React.createElement ...
- 学习 React(jsx语法) + es2015 + babel + webpack
视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...
- JSX语法简介
React的核心机制之一就是可以在内存中创建虚拟的DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能. JSX简介 JSX就是Javascript和XML结合的一种格式.Reac ...
- React学习笔记-2-什么是jsx?如何使用jsx?
什么是jsx? JSX是JavaScript XML 这两个单词的缩写,xml和html非常类似,简单来说可以把它理解成使用各种各样的标签,大家可以自行 百度.所以jsx就是在javascri ...
- 30-React JSX IN DEPTH
JSX IN DEPTH JSX 从根本上说,JSX只是提供了语法糖React.createElement(component, props, ...children)的功能.以下JSX代码: < ...
- 22-React JSX语法
React JSX语法 JSX只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和 ...
- React之JSX
0.对于学习React,我们先来熟悉下JSX的语法, 下面的这些语法仅用于构建一个组件的标签模块,定义完成之后如果需要做演示,请附加以下代码: ReactDOM.render( element1, d ...
随机推荐
- python --- mulitprocessing(多进程)模块使用
1. 什么是进程? 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基本执 ...
- eclipse修改默认workspace
1.进入 Window > Preferences > General > Startup and Shutdown 选中 Prompt for workspace on start ...
- 高通ASOC中的machine驱动
ASoC被分为Machine.Platform和Codec三大部分,其中的Machine驱动负责Platform和Codec之间的耦合以及部分和设备或板子特定的代码,再次引用上一节的内容:Machin ...
- Storm 对 0.10.x 版 Kafka之commit offsets
由于 0.10.x 版 Kafka 与 0.8.x 版有很大的变化,这种变化对下游 Storm 有非常大的影响,0.10.x 版的 Kafka 不但增加了权限管理的功能,而且还将 simple 和 h ...
- python函数式编程之装饰器(一)
1.开放封闭原则 简单来说,就是对扩展开放,对修改封闭 在面向对象的编程方式中,经常会定义各种函数. 一个函数的使用分为定义阶段和使用阶段,一个函数定义完成以后,可能会在很多位置被调用 这意味着如果函 ...
- Go笔记-指针
Go 语言的取地址符是 &,放到一个变量前使用就会返回相应变量的内存地址 一个指针变量可以指向任何一个值的内存地址 它指向那个值的内存地址,在 32 位机器上占用 4 个字节,在 64 位机器 ...
- Eclipse导入servlet项目报错
Eclipse导入servlet项目,缺少servlet的jar包,导致项目报错. 解决: step1:选中项目->properties step2:选择的Targeted Runtimes s ...
- HashMap实现分析
HashMap最基本的实现思想如下图所示,使用数组加链表的组合形式来完成数据的存储. Entry在数组中的位置是由key的hashcode决定的. 向一个数组长度为16,负载因子为0.75的HashM ...
- 在CentOS 6.x上配合Windows客户端搭建 git(gitosis)服务器
一.在 CentOS 上安装 git 和 gitosis: 逐条执行如下语句: sudo yum install git python-setuptools cd /opt sudo git clon ...
- shell编程之运算符(3)
declare声明变量类型 declare[+/-][选项]变量名 选项: - : 给变量设定类型属性 + : 取消变量的类型属性 -a : 将变量声明为数组型 -i : 将变量声明为整数型(inte ...