JSX简介

JSX简介

JSX(JavaScript XML)是 js 内定义的一套类 XML 语法，能够解析出目标 js 代码，颠覆传统 js 写法。HTML 由浏览器解析，而 JSX 是由 js 解析。当让也能够经过构建工具先解析生成，如 grunt、
webpack ,这样能够减小代码这行中 js 解析 JSX 的时间，这个后面会专题讲诉。JSX 本来是使用官方本身提供的方法处理，2015-7-12 日官方博客文章声明其自身用于 JSX 语法解析的编译器 JSTransform 已通过期，再也不维护，React JS 和 React Native 已经所有采用第三方Babel的JSX编译器实现。

基本语法

JSX必须严格闭合。

//错误
<div>
//正确
<div/>（也行,看需求）
<div></div>

能够把JSX标签当作一个变量，能够在任何位置使用和使用变量装起来。

var div = <div>ddd</div>
ReactDOM.render(div);

JSX一个标签就是一个组件，当存在两个组件在同一级是，必须使用一个标签（组件）包起来。
下面是错误的写法

<div></div>
<div></div>

正确写法是

<span>
    <div></div>
    <div></div>
</span>

自定义组件使用是必须首字母大写，数字母不大写直接解析为同名html标签。

<Test />//自定义
<div></div>//直接解析为<div></div>
<test />//直接解析为<test></test>,在浏览器是不识别的，没法显示

JSX使用JavaScipt

上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。不是什么JavaScript语法均可以用的，像if语句就不能够用，下面列举一些用法。其实会用最基本的用法就够了，其余的了解下。

在JSX中使用变量

var name = "test";
<div>{name + "666"}</div>

在JSX中使用Array（特殊的变量）

这个方式，很方便

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

在JSX中使用函数

由于上面能够直接使用数组，就方便了下面map方法的使用。其实就是至关于函数返回了一个结果，这个结果没有绑在变量上，直接使用了。

var names = ['Alice', 'Emily', 'Kate'];
<div>
    { 
        names.map(function (name) { 
            return <div>Hello, {name}!</div>
        }) 
    }
</div>

条件判断

直接使用if语句目前是不支持的。

<div className={if(isComplete){ 'is-complete' }}></div>

而解决办法是使用如下方法：

• 使用三目运算符

<div className={this.state.isComplete ? 'is-complete' : ''}></div>

• 设置一个变量并在属性中引用它
• 将逻辑转化到函数中
• 使用&&运算符

<div className={this.state.isComplete && 'is-complete'}></div>

在JSX中使用...操做符

...操做符是ES6新语法，JSX使用了它的特色，但并非真正的ES6语法。

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

至关于

var component = <Component foo={props.foo} bar={props.bar} />;

若是override，该怎么作呢？也很简单：

var component = <Component {...props} foo="override"/>;
console.log(this.props.foo) //输出 override

JSX注释

JSX的注释，实话说不方便。下面的注释是错误的，只要把JSX关键部分注释是没效果的。

//<div></div>
<div> //</div>

下面有两种方式能够生效

• 或括号注释,跟javascript差很少

<div>
    {
        /*
            dddd
        */
    }
</div>

• 内联属性注释

//多行注释
<input
    /*
        dddd
    */
    name="email"/>
// 单行注释
<input 
    name="email"  //ddd
    placeholder="ddd"/>

因此像注释某个或多个JSX整个标签，要在花括号中注释

{
    //必须有空字符串，要不会包语法错误。
    ""//<div>ddd</div>
}

JSX优势和特色

• 更加熟悉，语法跟HTML很是类似（90以上类似度）
• 更加语义化，容许自定义标签及组件。
• 更加直观，标签处理方式，更加可读。
• 抽象化，React的升级，不须要改动任何JSX代码。
• 关注点分离,模块化，JSX以干净且简洁的方式保证了组件中的标签与全部业务逻辑的互相分离。

JSX与HTML有何不一样

JSX跟HTML很像，但却不是HTML语法的完美复制。实际上，JSX规范中这样声明：

这个规范（JSX）并不尝试去遵循任何XML或HTML规范。JSX是做为一种ECMAScript特性来设计的，至于你们以为JSX像XML这一事实，那仅仅是由于你们比较熟悉XML。 详细

下面咱们探索下JSX与HTML语法上的几点关键区别。

• JSX可使用变量属性
  首先看看HTML的例子
  JSX以一样的方式实现了属性的设置，同时还提供了将属性设置为动态JavaScript变量的便利。要设置动态属性，你只须要包本来的引号括起来的文本替换为花括号包囊的JavaScript变量或函数。看例子：

var id = this.props.id;
function getId(){
    return "test";
}
<div id={id} ></div>//变量
<div id={this.getId()} ></div>//函数也能够

• 其中使用到HTML的class在JSX中是className

//在js中写css属性固然要遵照语法，就像写js对象同样。
<div className="test"></div>

• 事件要使用驼峰式写法。

var add =  funtion(){}
<div className="test" onClick={add} style={style}></div>

• sytle的css属性要使用驼峰式写法。

//在js中写css属性固然要遵照语法，就像写js对象同样。
var style= {
    fontSize: 13,
    bold: normal,
}
<div style={style}></div>

非DOM属性

下面的特殊属性是JSX中存在

• key
• ref
• dangerouslySetInnerHTML