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. java IO(六):额外功能处理流

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  2. 【转】globk和glorg中使用的apr文件

    gamit和globk分析设置先验坐标和速度的要求和规则是不同的,因为在不同的阶段和环境下需要不同.从相位数据和松弛约束坐标和它们的方差得到的精 密坐标的可靠估计是假设对先验值的调整很小,也就是说在调 ...

  3. smokeping一键安装脚本

    #!/bin/bash #Date 2017/11/11 #mail caoyf1992@163.com [ $(id -u) != "0" ] && echo & ...

  4. [TCP/IP]TCP连接的建立和终止

    TCP 是支持全双工通信的传输层协议,为了开发出更好的网络通信应用,清楚了解其中的交互过程是非常必要的. 下面用比较直白的话来描述&理解一下这个过程: TCP 连接建立:三次握手 服务器依次调 ...

  5. 安装基准测试工具sysbench

    下载地址: http://pan.baidu.com/s/16KhJ4 解包 tar -zxvf sysbench-0.4.12.tar.gz 进入源码文件夹 cd sysbench- 执行autog ...

  6. ABP官方文档翻译 3.8 数据过滤器

    数据过滤器 介绍 预定义过滤器 ISoftDelete 何时使用? IMustHaveTenant 何时使用? IMayHaveTenant 何时使用 禁用过滤器 关于using语句 关于多租户 全局 ...

  7. Python之Suds库调用WCF时复杂参数序列化

    今天主要做自动化测技术支持工作,最近一直在做接口自动化这块,前些天在研究将web页面模拟http进行接口自动化,这周杭州那边想测试WCF服务,所以这两天一直在探索.遇到的第一个问题就是服务参数传参序列 ...

  8. 夏令营讲课内容整理 Day 6 Part 3.

    第三部分主要讲的是倍增思想及其应用. 在Day3的整理中,我简要提到了倍增思想,我们来回顾一下. 倍增是根据已经得到的信息,将考虑的范围扩大一倍,从而加速操作的一种思想,它在变化规则相同的情况下,加速 ...

  9. C# 使用 Lotus notes 公共邮箱发送邮件

    公司的邮件系统用的是反人类的 Lotus notes, 你敢信? 最近要实现一个功能,邮件提醒功能,就是通过自动发送提醒邮件 前前后后这个问题搞了2天,由于公司的诸多条件限制,无法直接调用到公司发送邮 ...

  10. JAVAEE——BOS物流项目04:学习计划、datagrid、分页查询、批量删除、修改功能

    1 学习计划 1.datagrid使用方法(重要) n 将静态HTML渲染为datagrid样式 n 发送ajax请求获取json数据创建datagrid n 使用easyUI提供的API创建data ...