深入JSX

JSX是一个JavaScript语法扩展，类似于XML。你可以使用React，可以进行JSX语法到JavaScript的转换

Why JSX?

react不是必须使用JSX。你可以使用普通的JS。然而，我们建议使用JSX因为它定义树结构（dom）简洁而且是我们熟悉的语法。简明的代码结构更利于开发和维护。 XML有着开闭标签，在构建复杂的树形结构时，比函数调用和对象字面量更易读。

HTML Tags vs. React Components

react可以渲染HTML标签（字符串）或react 组件（类）。渲染一个HTML标签，JSX只使用首字母小写标签名称：

var myDivElement = 
    
;ReactDOM.render(myDivElement, document.getElementById('example'));

要渲染一个react组件，只需创建一个首字母大写的局部变量：

var MyComponent = React.createClass({/*...*/});var myElement = 
    ;ReactDOM.render(myElement, document.getElementById('example'));

react使用首字母大小写的惯例区分本地组件和html标签例如：

    (这是react组件)
这是html标签

jsx中原有的javascript的保留字都不能使用，例如：class,for必须使用className,htmlFor;

JSX并不是新语言，也没有改变JavaScript的语法，只是对JavaScript的拓展。

//使用JSXReact.render(    content,    document.getElementById('example'));//不使用JSXReact.render(    React.createElement('label', {className: 'xxx', htmlFor: 'input'}, 'content'),    document.getElementById('example'));

jsx transform

React JSX从类似于xml的语法转换成javascript。xml的元素，属性和子节点转换成参数传入React.createElement方法

var Nav, Profile;// 输入(JSX):var app = 
    ;// 转换后(JS):var app = React.createElement(  Nav,  {color:"blue"},  React.createElement(Profile, null, "click"));

JavaScript 表达式

使用JavaScript表达式为一个属性值，将表达式写在一对花括号（{}）中代替双引号（“”）。

// Input (JSX):var person = 
    ;// Output (JS):var person = React.createElement(  Person,  {name: window.isLoggedIn ? window.name : ''});

布尔型属性

// These two are equivalent in JSX for disabling a button;;// And these two are equivalent in JSX for not disabling a button;;

子表达式

// Input (JSX):var content = 
    
     {window.isLoggedIn ? 
      : 
     }
    ;// Output (JS):var content = React.createElement(  Container,  null,  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login));

注释

在JSX添加注释是很容易的；他们只是JS表达式。当你在一个标签区域内，你只需要小心地把{ }放在注释的周围。如下：

var content = (  
    );

jsx是类似于html但是不完全相同，但是还是有不同的地方

JSX解构赋值

如果提前就知道了组件的属性的话，写起来很容易。例如component组件有两个动态的属性foo和bar：

var component = 
    ;

而实际上，有些属性可能是后续添加的，我们没办法一开始就确定，我们可能会写出下面不好的代码：

var component = 
    ;component.props.foo = x; // badcomponent.props.bar = y; // also bad

这样写是错误的，因为我们手动直接添加的属性React后续没办法检查到属性类型错误，也就是说，当我们手动添加的属性发生类型错误时，在控制台是看不到错误信息的。

在React的设定中，初始化完props后，props是不可变的。改变props会引起无法想象的后果。

解构属性

为了解决这个问题，React引入了解构属性，其实就是es6的语法实现具体看：

var props = {};props.foo = x;props.bar = y;var component = 
    ;

你可以使用结构赋值方式和普通的方式混合使用，但如果碰到同名的属性的时候后者覆盖前者的属性如下：

var props = { foo: 'default' };  var component = 
    ;  console.log(component.props.foo); // 'override'

JSX 陷阱

HTML 实体

｛/*正常显示First · Second*/｝
    
     First · Second
    
｛/*显示异常First · Second*/｝
    
     {'First · Second'}
    

那应该怎么办呢？

1.使用unicode编码

2.String.fromCharCode(183)

3.使用属性：dangerouslySetInnerHTML如：<div dangerouslySetInnerHTML={

{__html: 'First &middot; Second'}} />

自定义HTML属性

如果在编写React过程中使用了自定义属性，React不会渲染的

html中没有发现有dd属性

要想使用请在属性前面添加data-

style属性

在React中写行内样式时，需要写在双大括号中（{

{}}），不能采用引号的书写方式

React.render(    
    
             xxxxx    
    
,    document.getElementById('example'));