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的更多相关文章

  1. React的使用与JSX的转换

    前置技能:Chrome浏览器   一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...

  2. React Native JSX value should be expression or a quoted JSX text.

    问题描述:  我在使用props时候, 我的写法是这样的 ... <View> <Person name='john' age=32 gender=true></Pers ...

  3. React反模式 —— 如何不使用JSX地动态显示组件

    欢迎指导与讨论 : ) 前言 文章的最后能写出以 Modal.open( ) 这种调用形式,动态显示React对话框组件的写法(类似于ant design),同时涉及数据交互(数据能异步地返回给调用者 ...

  4. 深入理解JSX

    本文由笔者翻译自官方文档的JSX In Depth,若干案例经过了改写.其实说白了也好像不算太深入,但还是提示了一些可能的盲区. JSX是为构造React元素方法React.createElement ...

  5. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

  6. JSX语法简介

    React的核心机制之一就是可以在内存中创建虚拟的DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能. JSX简介 JSX就是Javascript和XML结合的一种格式.Reac ...

  7. React学习笔记-2-什么是jsx?如何使用jsx?

    什么是jsx?    JSX是JavaScript  XML 这两个单词的缩写,xml和html非常类似,简单来说可以把它理解成使用各种各样的标签,大家可以自行 百度.所以jsx就是在javascri ...

  8. 30-React JSX IN DEPTH

    JSX IN DEPTH JSX 从根本上说,JSX只是提供了语法糖React.createElement(component, props, ...children)的功能.以下JSX代码: < ...

  9. 22-React JSX语法

    React JSX语法 JSX只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和 ...

  10. React之JSX

    0.对于学习React,我们先来熟悉下JSX的语法, 下面的这些语法仅用于构建一个组件的标签模块,定义完成之后如果需要做演示,请附加以下代码: ReactDOM.render( element1, d ...

随机推荐

  1. Struts2 (二)

    1 自定义结果视图 1.1 自定义一个类实现com.opensymphony.xwork2.Result接口. package com.xuweiwei.action; import com.open ...

  2. LVS负载均衡介绍

    LVS介绍 负载均衡器 • 链路负载均衡 (三层负载均衡) • 服务器负载均衡 (四层负载均衡) • 应用层负载均衡 (七层负载均衡) • 全局负载均衡 基本情况 • 实现服务器负载均衡 • 核心功能 ...

  3. ASP.NET没有魔法——ASP.NET MVC 模型验证

    在前面的文章中介绍了用户的注册及登录功能,在注册用户时可以通过代码的形式限制用户名及密码的格式,如果不符合要求那么就无法完成操作,如下图: 该功能的原理是Identity基于的Entity Frame ...

  4. Spring MVC的DispatcherServlet

    Spring MVC提供了一个名为org.springframework.web.servlet.DispatcherServlet的Selvet充当前端控制器,所有的请求驱动都围绕这个Dispatc ...

  5. datatables里面的search怎么去掉?

    今天使用datatables插件的时候,由于需求是把自带的search去掉,并且给输入框加上placeholder="Search",使其看起来更简洁美观,于是乎简单粗暴的把代码改 ...

  6. java HotSpot 内存管理白皮书

    原文见:http://www.open-open.com/lib/view/open1381034220705.html.查阅资料后,对原文做了补充. 文中关于JVM的介绍基于JDK1.6的Hotsp ...

  7. Golang常用包

    fmt 实现了格式化IO函数,格式化短语派生于C io 提供了原始的io操作 bufio 这个包实现了缓冲的io,io.Reader 和 io.Write 对象 sort 对数组和用户定义集合的原始的 ...

  8. 洛谷 [P3973] 线性代数

    最大权闭合子图,神题 这不是线性代数,这是网络流. 我们看见这是一堆矩阵的运算,而且最后变成了一个数,那么我们就想到,把这个矩阵乘法的过程用具体的数字推出来 我们发现,a是一个01矩阵,然后其实就可以 ...

  9. HDU 4333 Revolving Digits [扩展KMP]【学习笔记】

    题意:给一个数字,每一次把它的最后一位拿到最前面,一直那样下去,分别求形成的数字小于,等于和大于原来数的个数. SAM乱搞失败 当然要先变SS了 然后考虑每个后缀前长为n个字符,把它跟S比较就行了 如 ...

  10. vuex学习笔记

    一.vuex的目的 把组件的共享状态抽取出来,以一个全局单例模式管理.在这种模式下,组件树构成了一个巨大的视图,不管在树的哪个位置,任何组件都能获取状态或触发行为. 二.vuex集中式管理数据 安装 ...