React的JSX部分语法二

列表展示

在开发中 我们会需要对多条数据进行展示，开发中自然不会一条条展示，上篇说到本人之前在用vue开发，所以会拿vue进行比较
在vue中 如果需要展示多条数据 使用指令v-for循环出来
比如说现在有一个列表，让我们用react的语法来进行展示

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

    this.state = {
      boys: ["月月", "鸡鸡", "黑黑", "毛毛"]
      //随便起的 随便起的
    }
  }

  render() {
  	//通过普通for循环来展示
    // var movieLis = [];
    // for (var i in this.state.boys) {
    //   movieLis.push((<li>{this.state.boys[i]}</li>));
    // }

    return (
      <div>
        <h2>列表</h2>
        <ul>
          {
            this.state.boys.map((item, index) => {
              return (<li>{item}</li>)
            })
          }
        </ul>
      </div>
    )
  }
}

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

可以看出跟vue的写法还是很不一样 开发中更推荐第二种方式 直接map遍历出来展示 这就是JSX语法，如果不熟悉map怎么使用这里就不再做详解

2.2 计数器案例

上面案例并没有实现交互，只是实现了一个简单的列表展示，下图实现一个计数器 让我们更加了解JSX语法

class App extends React.Component {
  constructor(props) {
    super(props);
	//上篇说到变量都会定义在state中 通过类继承react
    this.state = {
      counter: 0
    }
  }

  render() {
    return (
      <div>
      //想要拿到变量需要this.state.counter
        <h2>当前计数:{this.state.counter}</h2>
        //这里我多写了一个bind(this) 在传入函数时，我们主动通过bind绑定this
        //那么之后react内部调用此函数时候，会有一个this，指向的就是我们绑定的this
        <button onClick={this.increment.bind(this)}>+1</button>
        <button onClick={this.decrement.bind(this)}>-1</button>
      </div>
    )
  }
//实现函数点击
  increment() {
  //这里需要注意，在vue中我们可以直接拿到变量进行操作，在react中必须要通过setState后续博客会详解setState
    this.setState({
      counter: this.state.counter+1
    })
  }

  decrement() {
    this.setState({
      counter: this.state.counter-1
    })
  }
}

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

三 JSX语法解析

这段element变量的声明右侧赋值的标签语法是什么呢？
它不是一段字符串（因为没有使用引号包裹），它看起来是一段HTML原生，但是我们能在js中直接给一个变量赋值html吗？
其实是不可以的，如果我们将 type=“text/babel” 去除掉，那么就会出现语法错误；
它到底是什么呢？其实它是一段jsx的语法；

<script type="text/babel">
  const element = <h2>Hello World</h2>
 ReactDOM.render(element, document.getElementById("app"));
</script>

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的本质，我们后面再来讨论；

JSX嵌入表达式

如果我们jsx中的内容是动态的，我们可以通过表达式来获取：
书写规则：{表达式}
大括号内可以是变量、字符串、数组、函数调用等任意js表达式；

jsx中的注释

jsx是嵌入到JavaScript中的一种语法，所以在编写注释时，需要通过JSX的语法来编写：
在编写jsx代码时候，需要使用下图注释方式 不得使用其他注释方式，因为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）

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

    this.state = {
      name: "why",
      age: 18,
      hobbies: ["篮球", "唱跳", "rap"],
      
      test1: null,
      test2: undefined,
      flag: false,

      friend: {
        name: "kobe",
        age: 40
      }
    }
  }

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

      <div>
        {/* 1.可以直接显示 */}
        <h2>{this.state.name}</h2>
        <h2>{this.state.age}</h2>
        <h2>{this.state.hobbies}</h2>

        
        {/* 2.不显示 */}
        <h2>{this.state.test1}</h2>
        <h2>{this.state.test1 + ""}</h2>
        <h2>{this.state.test2}</h2>
        <h2>{this.state.test2 + ""}</h2>
        <h2>{this.state.flag}</h2>
        <h2>{this.state.flag + ""}</h2>
        
        {/* 3.不显示 */}
        <h2>123{this.state.friend}</h2>
      </div>
    )
  }
}

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

为什么null、undefined、Boolean在JSX中要显示为空内容呢？

原因是在开发中，我们会进行很多的判断；
在判断结果为false时，不显示一个内容；
在判断结果为true时，显示一个内容；
这个时候，我们可以编写如下代码：

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

    this.state = {
      flag: false
    }
  }

  render() {
    return (
      <div>
        {this.state.flag ? <h2>我是标题</h2>: null}
        {this.state.flag && <h2>我是标题</h2>}
      </div>
    )
  }
}