JSX（JavaScript XML）语法

1. 在script标签中使用JSX语法需要：

• 使用babel
• 在script标签上添加：type="text/babel"

2. JSX中的注释

• 使用//、/**/
• 使用{/**/}

3. 嵌入数据

• 情况一：当变量是Number、String、Array类型时，可以直接显示
• 情况二：当变量是null、undefined、Boolean类型时，内容为空；
  • 如果希望可以显示null、undefined、Boolean，那么需要转成字符串；
  • 转换的方式有很多，比如toString方法、和空字符串拼接，String(变量)等方式；
• 情况三：对象类型不能作为子元素（not valid as a React child）

4. 嵌入表达式：

• 运算表达式
• 三元/短路
• 函数调用

5. 绑定属性

• 普通属性的绑定可以按照规则绑定一个JS变量或函数返回值
• 绑定class时，使用className来绑定
• label标签上的for替换为：htmlFor
• 绑定style时：可以直接写内联对象，需要注意要使用小驼峰替换"-"连接的属性

6. 绑定事件

• React 事件的命名采用小驼峰式（camelCase），而不是纯小写;我们需要通过{}传入一个事件处理函数，这个函数会在事件发生时被执行
• 写函数时要注意this的指向，可以使用bind, apply或箭头函数来进行变量的准确指向

    {/* 1.方案一: bind绑定this(显示绑定) */}
    <button onClick={this.btnClick.bind(this)}>按钮1</button>
    <button onClick={this.btnClick.bind(this)}>按钮2</button>
    <button onClick={this.btnClick.bind(this)}>按钮3</button>
  
    {/* 2.方案二: 定义函数时, 使用箭头函数 */}
    <button onClick={this.increment}>+1</button>
    increment = () => {
      console.log(this.state.counter);
    }
  
    {/* 3.方案三(推荐): 直接传入一个箭头函数, 在箭头函数中调用需要执行的函数*/}
    <button onClick={() => { this.decrement("why") }}>-1</button>