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')
);


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

相关文章推荐

JSX语法详解

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

ReactJS读书笔记一:深入理解JSX

JSX语法是react的一大亮点。 之前很不喜欢在js中写模板,因为js字符串换行很麻烦,所以大家都习惯把模板用script标签写在html中。后来发现这样其实挺坑的,特别是当你的网站是前后端分离的时...

android service 后台执行定时任务

关于service 大家应都知道是android 四大组件之一,用来执行后台任务的。 如果还不太了解service 可以看看郭大神写的Android Service完全解析,关于服务你所需知道的一切,...

ELK 在 Spark 集群的应用

概述 大数据处理技术越来越火,云计算平台也如火如荼,二者犹如 IT 列车的两个车轮,相辅相成,高速发展。如果我们将大数据处理平台比作一个可能会得病的人的话,那么日志分析系统就是给病人诊断的医生。...

23种设计模式全解析

一、设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。 结构型模式,共七种:适配器模式、装饰器模式、代理模式、外观模式...

java实现求最大回文长度

以每个位置为中心,向两端扩展,计算以每个位置为中心的最大的palindrome。 时间O(n^2),空间O(1);   public class Solution {     public s...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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