react渲染方式的几种是什么

react渲染方式有：1、利用条件表达式渲染，适用于两个组件二选一的渲染；2、利用“&&”操作符渲染，适用于一个组件有无的渲染；3、利用变量输出组件渲染；4、利用函数方法输出组件或者利用函数式组件进行渲染。

本教程操作环境：Windows7系统、react17.0.1版、Dell G3电脑。

React 组件条件渲染的几种方式

一、条件表达式渲染 （适用于两个组件二选一的渲染）

render() {   const isLoggedIn = this.state.isLoggedIn;   return (     <div>       {isLoggedIn ? (         <LogoutButton onClick={this.handleLogoutClick} />       ) : (         <LoginButton onClick={this.handleLoginClick} />       )}     </div>   ); }

二、&& 操作符渲染 (适用于一个组件有无的渲染)

function Mailbox(props) {   const unreadMessages = props.unreadMessages;   return (     <div>       <h1>Hello!</h1>       {unreadMessages.length > 0 &&         <h2>           You have {unreadMessages.length} unread messages.         </h2>       }     </div>   ); }

三、利用变量输出组件渲染 （适用于有多个组件多种条件下的渲染）

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

四、利用函数方法输出组件或者利用函数式组件进行渲染 （适用于多个子组件需要根据复杂的条件输出的情况）

1. 函数方式

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

2. 函数式组件

function Greeting(props) {   const isLoggedIn = props.isLoggedIn;   if (isLoggedIn) {     return <UserGreeting />;   }   return <GuestGreeting />; }   ReactDOM.render(   // Try changing to isLoggedIn={true}:   <Greeting isLoggedIn={false} />,   document.getElementById('root') );

【