Vue&React条件渲染

声明：

---

条件渲染的方式

条件渲染也有两种方式：

• 以Vue为代表的模板语言式的条件渲染，比如特殊的控制标签，特殊的控制指令等
• 以React为代表的JSX式的条件渲染，写起来就像是写普通的JS代码

---

Vue

Vue选择的是使用特殊的指令比如v-if、v-show、v-else等等来控制对应的标签是否进行输出。例：

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

当ok为真值(truthy)时，这些标签才会被渲染。Vue由于现在也支持JSX，所以其实也可以使用JSX式的条件渲染，但是不得不说，模板语法才是Vue的核心，没办法

---

React

React由于使用JSX，所以它的条件渲染变得极为简单，如：

render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {      
        button = <LogoutButton onClick={this.handleLogoutClick} />;    
    } else {      
        button = <LoginButton onClick={this.handleLoginClick} />;    
    }
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />        
        {button}      
      </div>
    );
}

如果isLoggedIn那么button就是<LogoutButton onClick={this.handleLogoutClick} />，否则就是<LoginButton onClick={this.handleLoginClick} />

---

参考文档：