需要学习掌握的知识点

1.三目运算

2.null、undefined、Boolean转换字符串的方法

3.对象解构

JSX语法

JSX是什么？

• JSX是一种JavaScript的语法扩展（eXtension），也在很多地方称之为JavaScript XML，因为看起就是一段XML语法；
• 它用于描述我们的UI界面，并且其完全可以和JavaScript融合在一起使用；
• 它不同于Vue中的模块语法，你不需要专门学习模块语法中的一些指令（比如v-for、v-if、v-else、v-bind）；

为什么React选择了JSX？

• React认为渲染逻辑本质上与其他UI逻辑存在内在耦合
• • 比如UI需要绑定事件（button、a原生等等）；
  • 比如UI中需要展示数据状态，在某些状态发生改变时，又需要改变UI；
• 他们之间是密不可分，所以React没有将标记分离到不同的文件中，而是将它们组合到了一起，这个地方就是组件（Component）；
• • 当然，后面我们还是会继续学习更多组件相关的东西；
• 在这里，我们只需要知道，JSX其实是嵌入到JavaScript中的一种结构语法；

JSX的书写规范：

• JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div原生（或者使用后面我们学习的Fragment）；
• 为了方便阅读，我们通常在jsx的外层包裹一个小括号()，这样可以方便阅读，并且jsx可以进行换行书写；
• JSX中的标签可以是单标签，也可以是双标签；
• • 注意：如果是单标签，必须以/>结尾；

JSX的本质，我们后面再来讨论；

  <script type="text/babel">
   // jsx语法（只有type="text/babel"）
   // styled-compontents 
    const element = <h2>Hello World</h2>;
    ReactDOM.render(element, document.getElementById("app"));
   </script>

JSX嵌入表达式

如果我们jsx中的内容是动态的，我们可以通过表达式来获取：

• 书写规则：{表达式}
• 大括号内可以是变量、字符串、数组、函数调用等任意js表达式；

jsx中的注释

jsx是嵌入到JavaScript中的一种语法，所以在编写注释时，需要通过JSX的语法来编写：

<div>
  {/* 我是一段注释 */}
  <h2>Hello World</h2>
</div>

JSX嵌入变量

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

<script type="text/babel">
    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          // 1.在{}中可以正常显示的内容
          name:'why',
          age: 18,
          names:[1,2,3,4,5,6],
          // 2.在{}中不能显示（忽略）
          test1: null, // null
          test2: undefined, // undenfined
          test3: true, // Boolean 有toString方法
          flag: true,
          // 3.对象不能作为jsx的子类
          friend:{
            age: 24,
            name:'哈哈'
          }
        }
      }
      render() {
        const {age,name} = this.state.friend
        return (
          <div>
            <h2>{this.state.name}</h2>
            <h2>{this.state.age}</h2>
            <h2>{this.state.names}</h2>

            <h2>{this.state.test1+''}</h2>
            <h2>{this.state.test2+''}</h2>
            <h2>{this.state.test3.toString()}</h2>
            <h2>{this.state.flag?"您好呀": null}</h2>
            <h2>{this.state.flag && "您好呀"}</h2>
            <h2>{age}{name}</h2>
            {/*<h2>{this.state.friend}</h2>*/}
          </div>
        )
      }
    }

    ReactDOM.render(<App/>, document.getElementById("app"));
  </script>

JSX嵌入表达式

JSX中，也可以是一个表达式。

这里我们演练三个，其他的大家在开发中灵活运用：

• 运算表达式
• 三元运算符
• 执行一个函数

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: "kobe",
      lastName: "bryant",
      age: 20
    }
  }

  render() {
    const = {firstName,lastName,age} = this.state
    return (
      <div>
        {/* 运算表达式 */}
        <h2>{firstName + " " + lastName}</h2>
        {/* 三元运算符 */}
        <h2>{age >= 18 ? "成年人": "未成年人"}</h2>
        {/* 执行一个函数 */}
        <h2>{this.sayHello("kobe")}</h2>
      </div>
    )
  }

  sayHello(name) {
    return "Hello " + name;
  }
}