React 条件渲染

简介: 10月更文挑战第9天

在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。

React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI。

先来看两个组件:

function UserGreeting(props) {

 return <h1>欢迎回来!</h1>;

}


function GuestGreeting(props) {

 return <h1>请先注册。</h1>;

}

我们将创建一个 Greeting 组件,它会根据用户是否登录来显示其中之一:

React 实例

function Greeting(props) {  const isLoggedIn = props.isLoggedIn;   if (isLoggedIn) {    return <UserGreeting />;   }  return <GuestGreeting />;} const root = ReactDOM.createRoot(document.getElementById("root"));root.render(  // 尝试修改 isLoggedIn={true}:  <Greeting isLoggedIn={false} />);


尝试一下 »


元素变量

你可以使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分,而输出的其他部分不会更改。

在下面的例子中,我们将要创建一个名为 LoginControl 的有状态的组件。

它会根据当前的状态来渲染 <LoginButton /><LogoutButton />,它也将渲染前面例子中的 <Greeting />

React 实例

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>     );   }} const root = ReactDOM.createRoot(document.getElementById("root"));root.render(  <LoginControl />);


尝试一下 »


与运算符 &&

你可以通过用花括号包裹代码在 JSX 中嵌入任何表达式 ,也包括 JavaScript 的逻辑与 &&,它可以方便地条件渲染一个元素。

React 实例

function Mailbox(props) {  const unreadMessages = props.unreadMessages;   return (    <div>       <h1>Hello!</h1>       {unreadMessages.length > 0 &&         <h2>           您有 {unreadMessages.length} 条未读信息。         </h2>       }    </div>   );} const messages = ['React', 'Re: React', 'Re:Re: React'];const root = ReactDOM.createRoot(document.getElementById("root"));root.render(  <Mailbox unreadMessages={messages} />);


尝试一下 »

在 JavaScript 中,true && expression 总是返回 expression,而 false && expression 总是返回 false

因此,如果条件是 true&& 右侧的元素就会被渲染,如果是 false,React 会忽略并跳过它。


三目运算符

条件渲染的另一种方法是使用 JavaScript 的条件运算符:

condition ? true : false

在下面的例子中,我们用它来有条件的渲染一小段文本。

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

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

); } 同样它也可以用在较大的表达式中,虽然不太直观:

render() {

 const isLoggedIn = this.state.isLoggedIn;

 return (

   <div>

     {isLoggedIn ? (

       <LogoutButton onClick={this.handleLogoutClick} />

     ) : (

       <LoginButton onClick={this.handleLoginClick} />

     )}

   </div>

 );

}


阻止组件渲染

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

在下面的例子中,<WarningBanner /> 根据属性 warn 的值条件渲染。如果 warn 的值是 false,则组件不会渲染:

React 实例

function WarningBanner(props) {  if (!props.warn) {    return null;   }    return (    <div className="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 ? '隐藏' : '显示'}        </button>       </div>     );   }} const root = ReactDOM.createRoot(document.getElementById("root"));root.render(  <Page />);


尝试一下 »

组件的 render 方法返回 null 并不会影响该组件生命周期方法的回调。例如,componentWillUpdate 和 componentDidUpdate 依然可以被调用。

目录
相关文章
|
7月前
|
前端开发 JavaScript
React如何进行条件渲染
React如何进行条件渲染
45 0
|
2月前
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
|
2月前
|
前端开发 JavaScript 容器
React 元素渲染
10月更文挑战第7天
27 1
|
2月前
|
监控 前端开发 UED
在 React 18 中利用并发渲染提高应用性能
【10月更文挑战第12天】利用并发渲染需要综合考虑应用的特点和需求,合理运用相关特性和策略,不断进行优化和调整,以达到最佳的性能提升效果。同时,要密切关注 React 的发展和更新,以便及时利用新的技术和方法来进一步优化应用性能。你还可以结合具体的项目实践来深入理解和掌握这些方法,让应用在 React 18 的并发渲染机制下发挥出更好的性能优势。
110 59
|
2月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
2月前
|
前端开发 JavaScript 算法
React 渲染优化策略
【10月更文挑战第6天】React 是一个高效的 JavaScript 库,用于构建用户界面。本文从基础概念出发,深入探讨了 React 渲染优化的常见问题及解决方法,包括不必要的渲染、大量子组件的渲染、高频事件处理和大量列表渲染等问题,并提供了代码示例,帮助开发者提升应用性能。
55 6
|
4月前
|
资源调度 前端开发 API
React Suspense与Concurrent Mode:异步渲染的未来
React的Suspense与Concurrent Mode是16.8版后引入的功能,旨在改善用户体验与性能。Suspense组件作为异步边界,允许子组件在数据加载完成前显示占位符,结合React.lazy实现懒加载,优化资源调度。Concurrent Mode则通过并发渲染与智能调度提升应用响应性,支持时间分片和优先级调度,确保即使处理复杂任务时UI仍流畅。二者结合使用,能显著提高应用效率与交互体验,尤其适用于数据驱动的应用场景。
72 20
|
4月前
|
前端开发
React 如何使用条件渲染
【8月更文挑战第17天】React 如何使用条件渲染
45 3
|
4月前
|
前端开发 JavaScript 中间件
|
4月前
|
前端开发 JavaScript 数据管理
React 中无渲染组件
【8月更文挑战第31天】
41 0