React学习之——条件渲染

简介: 【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。

if运算符

function UserGreeting(props) {
   
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
   
  return <h1>Please sign up.</h1>;
}
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')
);

与运算符 &&
通过花括号包裹代码,你可以在 JSX 中嵌入任何表达式。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行元素的条件渲染。

function Mailbox(props) {
   
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {
   /* 在jsx中通过&&来判断是否展示相关内容 */}
      {
   unreadMessages.length > 0 &&
        <h2>
          You have {
   unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={
   messages} />,
  document.getElementById('root')
);

三目运算符
另一种内联条件渲染的方法是使用 JavaScript 中的三目运算符 condition ? true : false。
在下面这个示例中,我们用它来条件渲染一小段文本:

render() {
   
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{
   isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

同样的,它也可以用于较为复杂的表达式中,虽然看起来不是很直观:

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

阻止组件渲染
在极少数情况下,你可能希望能隐藏组件,即使它已经被其他组件渲染。若要完成此操作,你可以让 render 方法直接返回 null,而不进行任何渲染。

function WarningBanner(props) {
   
  if (!props.warn) {
   
    return null; // return null 表示阻止渲染组件
  }

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

在组件中返回 null 并不会影响组件的生命周期。例如,上面这个示例中,componentDidUpdate生命周期 依然会被调用。

相关文章
|
3月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
75 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
2月前
|
前端开发 JavaScript 容器
React 元素渲染
10月更文挑战第7天
28 1
|
3月前
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
34 0
|
2月前
|
监控 前端开发 UED
在 React 18 中利用并发渲染提高应用性能
【10月更文挑战第12天】利用并发渲染需要综合考虑应用的特点和需求,合理运用相关特性和策略,不断进行优化和调整,以达到最佳的性能提升效果。同时,要密切关注 React 的发展和更新,以便及时利用新的技术和方法来进一步优化应用性能。你还可以结合具体的项目实践来深入理解和掌握这些方法,让应用在 React 18 的并发渲染机制下发挥出更好的性能优势。
118 59
|
1月前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
37 2
|
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 渲染优化的常见问题及解决方法,包括不必要的渲染、大量子组件的渲染、高频事件处理和大量列表渲染等问题,并提供了代码示例,帮助开发者提升应用性能。
56 6
|
2月前
|
资源调度 前端开发 JavaScript
React进阶学习
React进阶学习
15 1
|
2月前
|
JSON 前端开发 JavaScript
React 进阶阶段学习计划
React 进阶阶段学习计划
|
3月前
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
31 3