130_React笔记4_元素渲染，条件渲染，阻止渲染

一，元素的渲染

• 元素渲染
  • 要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上

  • H5写法
    <div id="root"></div>
    
    react写法与之等效
    const element = <h1>Hello, world</h1>;
    ReactDOM.render(element, document.getElementById('root'));

• 更新渲染
  • 更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法
  • React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分

  • function tick() {
      const element = (
        <div>
          <h1>Hello, world!</h1>
          <h2>It is {new Date().toLocaleTimeString()}.</h2>
        </div>
      );
      ReactDOM.render(element, document.getElementById('root'));
    }
    
    setInterval(tick, 1000);

     

二，条件渲染

1. if等条件运算符

   1. //元素变量
      function UserGreeting(props) {
          return <h1>欢迎回来!</h1>;
        }
        
      function GuestGreeting(props) {
          return <h1>请先注册。</h1>;
        }
      
      //条件函数
      function Greeting(props) {
          const isLoggedIn = props.isLoggedIn;
          if (isLoggedIn) {
            return <UserGreeting />;
          }
          return <GuestGreeting />;
        }
      
      使用：
      <Greeting isLoggedIn={false} />
      <Greeting isLoggedIn={true} />

       

2. 与运算符 &&

   1. function Mailbox(props) {
          const unreadMessages = props.unreadMessages;
          return (
            <div>
              <h1>Hello!</h1>
              {unreadMessages.length > 0 &&
                <h2>
                  您有 {unreadMessages.length} 条未读信息。
                </h2>
              }
            </div>
          );
        }
      
      使用：
        <Mailbox unreadMessages={''}/>
        <Mailbox unreadMessages={'messages'} />

       

3. 三目运算符

   1. function Mailbox2(props) {
          const isLoggedIn = props.isLoggedIn;
          return (
            <div>
              The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
            </div>
          );
      }
      
      使用：
      <Mailbox2 isLoggedIn={true}/>

       

三，阻止渲染

1. 让组件返回null，就不会渲染

2. // 可以不被渲染的元素
   function WarningBanner(props) {
       if (!props.warn) {
         return null;
       }
      
       return (
         <div className="warning">
           警告!
         </div>
       );
     }
   // 主渲染
   render() {
         return (
           <div>
             <WarningBanner warn={this.state.showWarning} />
             <button onClick={this.handleToggleClick}>
               {this.state.showWarning ? '隐藏' : '显示'}
             </button>
           </div>
         );
       }