认识 JSX

JSX 是什么

• JSX 是一种 JavaScript 的语法扩展（extension），或被称之为 JavaScript XML（因为其看起来像一段 XML 语法）。
• 用于描述 UI 界面，可以和 JavaScript 一起融合使用。
• 不同于 Vue，不需要学习一些指令（比如 v-for、v-if、v-else、v-bind）

JSX 书写规范

• JSX 顶层只能拥有一个根元素，所以需要在最外层包裹 div 或 fragment 元素。
• 为了代码的可读性，通常需要在 JSX 代码外包裹括号 ”( )“ ,这样 JSX 可在其中换行书写
• JSX 支持 元素与空元素书写，但是要保证代码格式正确，所有元素均需以 ”/>“结尾

代码示例：

render() {
          return (
            <div>
              <img src="" alt="" />
              <h2>当前计数: {this.state.counter}</h2>
              <button onClick={this.plusOne.bind(this)}> +1 </button>
              <button onClick={this.minusOne.bind(this)}> -1 </button>
            </div>
          );
        }

React 为什么使用 JSX

以下代码笔者个人观点：

JSX 支持以下代码书写，要与 JS 进行区分，众所周知 JS 支持的变量的数据类型中并不包含 HTML 元素。

const element = <h2>Hello React</h2>;
ReactDOM.render(element, document.getElementById("app"));

JSX 的代码书写与前端开发的职责分离观念（HTML 只负责页面框架、CSS 只负责页面样式、JS 只负责页面交互）背道而驰，这是因为 React 认为 " all in javascript "。

• React 认为渲染逻辑本质上与其他 UI 逻辑存在内在耦合
  • 比如 UI 需要绑定事件（button、a 元素等）
  • 比如 UI 中需要展示数据状态，在某些状态发生改变时，又需要改变 UI
• React 认为 HTML、CSS、JS 之间密不可分，并没有将它们分离到不同的文件中，而是将它们组合到一起，构成组件（Component）
• 可以认为 JSX 是嵌入到 JavaScript 中的一种结构语法

JSX 注释书写

JSX 只支持一种注释书写方式，如下代码所