在React中，可以创建不同的组件来封装各种需要的行为，还可以根据应用的状态变化只渲染其中一部分。
使用 if 或条件运算符来创建表示当前状态的元素，然后让React根据他们来更新UI。

Example：
无状态组件：

function UserGreeting(props){
  return <h1>Welcome back !</h1>;
}
function GuestGreeting(props){
  return <h1>Please sign up.</h1>;
}

//登录组件
function LoginButton(props) {
  return(
    <button onClick={props.onClick}>Login</button>
  );
}
//注销组件
function LogoutButton(props) {
  return(
    <button onClick={props.onClick}>Logout</button>
  );
}

创建一个 Greeting 组件，根据用户是否登录来显示其中之一：

function Greeting(props){
  const isLoggedIn = props.isLoggedIn ;
  if(isLoggedIn ）{
      return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  <Greeting isLoggedIn ={false} />,
document.getElementById('root')
);

创建一个名为 LoginControl 的有状态组件：
它会根据当前的状态来渲染<LoginButton />或<LogoutButton />, 它也将渲染前面例子中的<Greeting />.

class LoginControl extends React.Component {
    constructor(props){
        super(props);
        this.handleLoginClick = this.handleLoginClick.bind(this);
        this.handleLogoutClick = this.handleLogoutClick.bind(this);
        this.state={
            isLoggedIn: false
        };

    }
    handleLoginClick(){
        this.setState({isLoggedIn: true});
    }
    handleLogoutClick(){
        this.setState({isLoggedIn: false});
    }

    render(){
        const isLoggedIn = this.state.isLoggedIn;

        let button = null;
        if(isLoggedIn){
            button = <LogoutButton onClick={this.handleLogoutClick} />;
        }else{
            button = <LoginButton onClick={this.handleLoginClick} />;
        }

        return(
            <div>
                <Greeting isLoggedIn ={isLoggedIn} />
                {button}
            </div>
        );
    }
}
ReactDOM.render(
    <LoginControl />,
    document.getElementById('root')
);

阻止组件渲染

在极少数的情况下，可能希望隐藏组件，及时它被其他组件渲染。让render方法返回null而不是它的渲染结果即可实现。

<WarningBanner />根据属性warn的值条件渲染，
如果warn的值是false，则组件不会渲染：

if (!props.warn) {
return null;
}

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true}
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(prevState => ({
      showWarning: !prevState.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);