React的JSX部分核心语法

一：条件渲染

在某些情况下，我们希望界面根据不同情况展示不同的内容。因为之前一直使用vue进行开发，这里会以vue进行对比
在VUE中我们可以通过一些指令 v-if v-show来控制页面显示内容
在React中我们完全遵循JavaScript语法来进行条件渲染这也是react灵活的之一
学好了react 原生JS也会不错 那么react常见的渲染方式有哪些呢？

1.1条件判断语句

当逻辑方式非常多时，可以使用条件判断语句

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

    this.state = {
      isBoy: true
    }
  }

  render() {
    let titleJsx = null;
    if (this.state.isBoy) {
      titleJsx = <h2>是的~</h2>
    } else {
      titleJsx = <h2>不是~</h2>
    }

    return (
      <div>
        {titleJsx}
      </div>
    )
  }
}

当然如果觉得上面并不是太方便 我们也可以把它封装到一个函数中去

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

    this.state = {
      isBoy: true
    }
  }

  render() {
    return (
      <div>
        {this.getTitleJsx()}
      </div>
    )
  }

  getTitleJsx() {
    let titleJsx = null;
    if (this.state.isisBoyogin) {
      titleJsx = <h2>是~</h2>
    } else {
      titleJsx = <h2>不是~</h2>
    }
    return titleJsx;
  }
}

上面代码我都是通过ES6新语法类来书写 让虚拟DOM继承自React this.state可以定义一些变量

1.2三元表达式

另一种实现条件渲染的方法就是三元表达式:isboy?true:false
三元表达式适用于没有太多逻辑代码，只是根据不同条件直接返回不同的结果

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

    this.state = {
      isBoy: true
    }
  }

  render() {
    return (
      <div>
        <h2>{this.state.isBoy? "是~": "不是"}</h2>
        <button onClick={e => this.boyBtnClick()}>{this.state.isBoy ? "退出": "登录"}</button>
      </div>
    )
  }

  boyBtnClick() {
    this.setState({
      isBoy : !this.state.isBoy 
    })
  }
}

上图代码通过三元运算符实现一个条件不算复杂的案例 讲一下在react中定义点击事件 在vue中我们为了方便快捷直接@就可以绑定 在react中需要onClick C需要大写 然后以对象形式把点击事件添加，需要加this关键字

1.3 用react实现v-show效果

一个原生的html原生，渲染和不渲染，如果频繁的进行切换，相对来讲是比较耗费性能
在vue中提供了一个v-show指令来实现渲染和不渲染，大家相比都知道v-show是通过display来控制
react中没有指令，但react是相对灵活的，代价就是需要自己灵活的实现…

  render() {
    const { isLogin, username } = this.state;
    const nameDisplay = isLogin ? "block": "none";

    return (
      <div>
        <h2 style={{display: nameDisplay}}>{username}</h2>
        <button onClick={e => this.loginBtnClick()}>{isLogin ? "退出": "登录"}</button>
      </div>
    )
  }

看如上代码，其实就是写了一个行内标签，来控制username 目前没有讲到react中如何书写样式，就先写一个行内