React（2）--JSX

前言：

- 在 React 中，组件是用于分离关注点，而不是被当作模板或者处理显示逻辑的。


- 使用 React，我们要习惯HTML标签及生成这些标签的代码间的内在紧密关系 。


- React 可以不适用 JSX，然而 JSX 可以提高组件可读性，推荐使用 JSX 。

目录：

前言

目录

JSX
- 什么是JSX

- 为什么使用JSX

  1 允许使用熟悉的语法定义HTML元素树

  2 自定义标签

  3 程序结构直观

  4 抽象React Element 创建过程

  5 关注点分离

  6 是原生的JavaScript

  7 复合组件和自定义组件

  8 使用动态值 JavaScript代码块

  9 子节点

- JSX和HTML的区别

1 属性

2 条件判断

3 非DOM属性只在 JSX 中存在

4 事件React 自动绑定了组件所有方法的作用域无须手动 bind this 绑定

总结

JSX：

- 什么是JSX

JSX→JavaScript XML（一种在React组件内部构建标签的类XML语法）

  →

<h1 className='title'>标题</h1>

- 为什么使用JSX

  1. 允许使用熟悉的语法定义HTML元素树

  2. 自定义标签

  3. 程序结构直观

  4. 抽象React Element 创建过程

  5. 关注点分离

  6. 是原生的JavaScript

  7. 复合组件和自定义组件

  8. 使用动态值（{ JavaScript代码块 }）

  9. 子节点

→ 第9点：

var Box = React.createClass({
render: function(){
return(
<div className='box'>
{ this.props.children }
</div>
);
}
});

//调用
<Box>'I am a box!'</Box>

注解：Box所有子节点保存在 this.props.children的特殊组件中，this.props.chilidren == [ ’ I am box ! ’ ]

- JSX和HTML的区别

（此处只简要说明了几个，还有像 HTML 中 for ，JSX 使用 htmlFor 等细节需要大家自行熟悉学习。）

* 1. 属性：*

HTML：<div id='domId' class='content'></div>
JSX：<div id={domId} className={content}></div>

* 2. 条件判断：*

HTML：for  if

JSX：使用if等语句会渲染无效的JavaScript

代替方法：
- 三目运算
- 设置一个变量并在属性中使用它
- 将逻辑转化到函数
- 使用&&运算符

→
render : function(){
return(
<div className={ this.state.selected? ' selected' : ' no-selected'}>
</div>
);
}

* 3. 非DOM属性：只在 JSX 中存在*

- key : 一个可选的唯一标识符

- ref ： 允许组件在render方法之外保持对子组件的一个引用

- dangerouslySetInnerHTML：将 HTML 内容设置为字符串（少用 ！）

* 4. 事件：（React 自动绑定了组件所有方法的作用域，无须手动 .bind( this ) 绑定）*

HTML：<span onclick='...'></span>

JSX ：<span onClick={...}></span>

总结：

JSX 并不复杂，相反还很容易上手。想要运用的6，还需要我们 多写多用 。