【第22期】观点:IT 行业加班,到底有没有价值?

ReactJS 15.x - JSX是什么,JSX编译器,JSX语法转成原生的JS语法

原创 2016年08月29日 01:02:18

JSX语法,像是在Javascript代码里直接写XML的语法,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,React 官方推荐使用JSX, 当然你想直接使用纯Javascript代码写也是可以的,只是使用JSX,组件的结构和组件之间的关系看上去更加清晰。那么也就是说,我们写一个XML标签,实质上就是在调用React.createElement这个方法,并返回一个ReactElement对象。
使用React,不一定非要使用JSX语法,可以使用原生的JS进行开发。但是React作者强烈建议我们使用JSX,因为JSX在定义类似HTML这种树形结构时,十分的简单明了。简明的代码结构更利于开发和维护。XML有着开闭标签,在构建复杂的树形结构时,比函数调用和对象字面量更易读。


JSX编译器会把JSX写的文档--------转成--------->JS标准语法的文档

JSX写的文档

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

JS标准语法的文档

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.createElement('div', {className: "commentBox"},
        "Hello, world! I am a CommentBox."
      )
    );
  }
});
ReactDOM.render(
  React.createElement(CommentBox, null),
  document.getElementById('content')
);


版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

React JSX编译为JavaScript

提示:本机电脑上需要安装nood.js环境   1、安装React-Tools   命令行:npminstall -g react-­tools 2、进入项目根目录,编译JSX文件 命令...

JSX语法详解

JSX语法详解 本文在官方文档的基础上,进行了扩展扩展补充和一些解读。基本涵盖了JSX语法的细枝末节,JSX语法本身并不复杂,也容易掌握。本文供学习参考使用。 一、基础1、JSX是什么JS...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

react与jsx语法介绍--先行篇

这段时间开始入坑react了,看了官网的jsx语法方面的介绍,恩,确实有点迷迷的,有幸见到一篇歪果仁写的比较详细的有关react和jsx的细节性知识点总结,特地粗略翻译了一下(英语略渣),也顺便加深我...

React开发-JSX使用与详解

转载请注明预见才能遇见的博客:http://my.csdn.net/ 原文地址: React开发-JSX使用与详解 HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JS...
  • pcaxb
  • pcaxb
  • 2016-12-29 15:16
  • 1197

react——JSX语法

react JSX react是使用JSX来代替常规的JavaScript;JSX看起来是一个很像XML的JavaScript语法拓展;我们不需要一定使用JSX, ...

React高级教程(es6)——(1)JSX语法深入理解

简介:从根本上来说,JSX语法提供了一种创建React元素的语法糖,JSX语句可以编译成: React.createElement(component, props, …children)的形式,比...

react与jsx语法--后续篇

上篇 react与jsx语法介绍–先行篇通过一个官网简单demo大致简略介绍了下核心代码的作用,以及实现机制,这篇继续跟进歪果仁。为了不因我的失误给访问者造成迷惑,这篇主题就是: Introduc...

React:JSX进阶

JSX In Depth最根本上,JSX仅仅提供React.createElement(component,props, ...children)函数这样的语法糖,JSX代码://JSX代码 ...

React学习(二)JSX语法

React JSX React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 我们不需要一定使用 JSX,但它有以下...

React—JSX转换成标准的JavaScript

React—JSX转换成标准的JavaScript什么是JSX? JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 在 JavaScript 代码里写着 XML 格式的代码称...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)