需要学习掌握的知识点

1.三目运算

2.逻辑语

条件渲染

某些情况下，界面的内容会根据不同的情况显示不同的内容，或者决定是否渲染某部分内容：

• 在vue中，我们会通过指令来控制：比如v-if、v-show；
• 在React中，所有的条件判断都和普通的JavaScript代码一致；

常见的条件渲染的方式有哪些呢？

条件判断语句

一种方式是当逻辑较多时，通过条件判断：

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

    this.state = {
      isLogin: true
    }
  }

  render() {
    {/* 通过if判断，逻辑代码非常多的情况下*/}
    let welcome = null;
    let btnText = null
    if (this.state.isLogin) {
      welcome = <h2>欢迎回来~</h2>
      btnText = '退出'
    } else {
      welcome = <h2>请先登录~</h2>
      btnText = '登录'
    }

    return (
      <div>
        {welcome}
        <button onClick={e=>loginClick()}>{this.state.isLogin?'退出':'登录'}</button>
      </div>
    )
  }
}

当然，我们也可以将其封装到一个独立的函数中：

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

    this.state = {
      isLogin: true
    }
  }

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

  getTitleJsx() {
    let titleJsx = null;
    if (this.state.isLogin) {
      titleJsx = <h2>欢迎回来~</h2>
    } else {
      titleJsx = <h2>请先登录~</h2>
    }
    return titleJsx;
  }
}

三元运算符

另外一种实现条件渲染的方法就是三元运算符：condition ? true : false;

三元运算符适用于没有太多逻辑的代码：只是根据不同的条件直接返回不同的结果

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

    this.state = {
      isLogin: true
    }
  }

  render() {
    return (
      <div>
        <h2>{this.state.isLogin ? "欢迎回来~": "请先登录~"}</h2>
        <button onClick={e => this.loginBtnClick()}>{this.state.isLogin ? "退出": "登录"}</button>
      </div>
    )
  }

  loginBtnClick() {
    this.setState({
      isLogin: !this.state.isLogin
    })
  }
}

与运算符&&

在某些情况下，我们会遇到这样的场景：

• 如果条件成立，渲染某一个组件；
• 如果条件不成立，什么内容也不渲染；

如果我们使用三元运算符，是如何做呢？

{this.state.isLogin ? <h2>{this.state.username}</h2>: null}

其实我们可以通过逻辑与&&来简化操作：

{this.state.isLogin && <h2>{this.state.username}</h2>}

v-show效果

针对一个HTML原生，渲染和不渲染之间，如果切换的非常频繁，那么会相对比较损耗性能：

• 在开发中，其实我们可以通过display的属性来控制它的显示和隐藏；
• 在控制方式在vue中有一个专门的指令：v-show；
• 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>
    )
  }