React文档笔记day07

选择性的渲染

在React中可以中可以创建独立的组件去囊括你所需要的行为，然后你可以只渲染部分，取决于你的props或者state

选择性的渲染和在DOM中非常相似，在JavaScript中使用if或者其他的条件判断语句去创建表示状态让并且让React更新UI去匹配状态。

：下面有两个组件

function UserGreeting(props) {
  return 
Welcome back!
;
}

function GuestGreeting(props) {
  return 
Please sign up.
;
}

现在来创建一个Greeting组件来来显示其中的一个，根据用户的登录状态。

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return ;
  }
  return ;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  ,
  document.getElementById('root')
);

元素变量

你可以用一个变量去存储标签，这可以帮助您有条件地渲染组件的一部分，而其余输出不会更改
例子：
以下两个组件代表着登入和登出按钮

function LoginButton(props) {
  return (
    
      Login
    
  );
}

function LogoutButton(props) {
  return (
    
      Logout
    
  );
}

下面我们再创建一个有状态的组件，这个组件会渲染出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;
    
    const button = isLoggedIn ? (
      
    ) : (
      
    );

    return (
      

        
        {button}
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

最主要的部分就来看LoginControl的render函数

render() {
    const isLoggedIn = this.state.isLoggedIn;
    
    const button = isLoggedIn ? (
      
    ) : (
      
    );

    return (
      

        
        {button}
      
    );
  }

首先会拿到是否登录的状态值

const isLoggedIn = this.state.isLoggedIn;

初始值是false,在构造器中已经初始化了。

然后就是一个三目运算符

const button = isLoggedIn ? (
      
    ) : (
      
    );

当用户登录的时候button就会被赋值成LogoutButton，当用户没有登录的时候被赋值成LoginButton

最后一个就是return函数
返回的是一个Greeting组件和button指向的标签。
Greeting的状态值也是个this.state.isLoggedIn绑定在一起。

声明变量和使用if语句是有条件地呈现组件的好方法，有时您可能希望使用较短的语法。有几种方法可以在JSX中嵌入条件 ：

可以用&&符号来简化判断语句

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    

      
Hello!
      {unreadMessages.length > 0 &&
        

          You have {unreadMessages.length} unread messages.
        
      }
    
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  ,
  document.getElementById('root')
);

使用大括号包起来，当前面的条件满足的时候才会执行后面的代码。

可以使用三目运算符
：

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

      The user is {isLoggedIn ? 'currently' : 'not'} logged in.
    
  );
}

也可以用来更大一点的表达式

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

      {isLoggedIn ? (
        
      ) : (
        
      )}
    
  );
}

就像在JavaScript中一样，您可以根据您和您的团队认为更具可读性选择适当的样式。还要记住，只要条件变得太复杂，它可能是提取组件的好时机

防止组件渲染

在极少数情况下，您可能希望组件能够隐藏自身，即使它是由另一个组件渲染的。为此，返回null而不是其渲染输出
：

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

  return (
    

      Warning!
    
  );
}

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 (
      

        
        
          {this.state.showWarning ? 'Hide' : 'Show'}
        
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

从组件的render方法返回null不会影响组件生命周期方法的触发。例如，componentWillUpdate和componentDidUpdate仍将被调用