React（2）--JSX

前言：

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

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

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

---

目录：

---

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，还需要我们 多写多用 。