认识 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 只支持一种注释书写方式，如下代码所示：

 render() {
          return (
            <div>
              {/* 我是一段注释 */}
            </div>
          );
        }

JSX 嵌入常用数据类型

 class App extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
            // 默认情况下，可以正常渲染的数据类型
            name: "huaqi", // String
            age: 18, // Number
            stars: ["curry", "james", "clay "], // Array

            // 默认情况下，不能渲染的数据类型
            test1: null, // null
            test2: undefined, // undefined
            test3: true, // Boolean

            // Object 对象不能作为 JSX 的子元素
            player: {
              name: "Clay Thomson",
              age: 20,
            },
          };
        }

        render() {
          const { name, age, stars, test1, test2, test3, player } = this.state;
          return (
            <div>
              <h2>{name}</h2>
              <h2>{age}</h2>
              <h2>{stars}</h2>
              <hr />
              <h2>{test1}</h2>
              <h2>{test2}</h2>
              <h2>{test3}</h2>
              <hr />
              {/* <h2>{player}</h2>
                  浏览器报错 " not valid as a React child "  
               */}
            </div>
          );
        }
      }

以下方法可以使默认情况下不能正常显示的数据类型正常显示：

{/* 
                使默认情况下不能正常渲染的数据类型，正常渲染 
                plan01：Boolean.toString() 
                注：三种数据类型中，只有 Boolean 拥有 toString() 方法

                plan02：使用 String() 函数处理

                plan03：拼接空字符串，隐式转换为 String 类型
            */}
              <h2>{test3.toString()}</h2>
              <hr />

              <h2>{String(test1)}</h2>
              <h2>{String(test2)}</h2>
              <h2>{String(test3)}</h2>
              <hr />

              <h2>{test1 + ""}</h2>
              <h2>{test2 + ""}</h2>
              <h2>{test3 + ""}</h2>

JSX 嵌入函数表达式

 class App extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
            firstName: "Clay",
            lastName: "Thomson",
            isLogin: true,
          };
        }

        render() {
          const { firstName, lastName, isLogin } = this.state;
          return (
            <div>
              {/* 运算符表达式 */}
              <h2>{firstName + " " + lastName}</h2>
              <h2>{20 * 50}</h2>
              <hr />

              {/* 三元表达式 */}
              <h2>{isLogin ? "welcome" : "login"}</h2>
              <hr />

              {/* 方法调用
                  此时为自调用，隐式绑定 this，
                  与 React 调用作区别
             */}
              <h2>{this.getFullName()}</h2>
            </div>
          );
        }

        getFullName() {
          return this.state.firstName + " " + this.state.lastName;
        }
      }