react中Fragment的使用场景

在 React 中,Fragment 是一个非常有用的组件,允许你将多个子元素包裹在一起,而不会在 DOM 中产生额外的节点。它通常用于以下几个场景:

import React, {Fragment} from 'react';

  1. 返回多个子元素而不添加额外的 DOM 元素,避免 DOM 层级过深

function MyComponent() {

return (

<Fragment>

<h1>Title</h1>

<p>This is a paragraph.</p>

</Fragment>

);

}

可以简写为:

function MyComponent() {

return (

<>

<h1>Title</h1>

<p>This is a paragraph.</p>

</>

);

}

这个 Fragment 不会在实际的 DOM 中产生任何新的节点,只是将 <h1><p> 元素组合在一起。

2.需要键值时使用 Fragment

function List() {
const items = [{ id: 1, title: 'Item 1' }, { id: 2, title: 'Item 2' }];
return (
`

` ` {items.map((item) => (` ` <React.Fragment key={item.id}>` `

{item.title}

` `

{item.description}

` ` </React.Fragment>` ` ))}` `
` ` );` ` }`

使用 Fragment 可以直接给每个子元素分配一个 key,避免多余的包裹元素。

3.返回多个条件渲染的元素

当需要基于不同条件渲染多个元素时,Fragment 也非常有用。它可以避免不必要的 div 元素,保持渲染逻辑清晰。

function MyComponent({ isLoggedIn }) {

return (

<>

{isLoggedIn ? (

<>

<h1>Welcome back!</h1>

<button>Logout</button>

</>

) : (

<>

<h1>Please log in</h1>

<button>Login</button>

</>

)}

</>

);

}

  1. 组合多个 return 语句

在某些复杂组件中,你可能有多个 return 语句来处理不同的渲染条件,而 Fragment 可以帮助你避免为每个条件创建新的 DOM 层级

function MyComponent({ isLoading, hasError }) {

if (isLoading) {

return <p>Loading...</p>;

}

if (hasError) {

return (

<React.Fragment>

<h1>Error</h1>

<p>Something went wrong.</p>

</React.Fragment>

);

}

return <h1>Welcome to the app!</h1>;

}

总结

Fragment 是一个非常有用的工具,帮助开发者在不引入额外的 DOM 元素的情况下返回多个子元素。常见的使用场景包括:

  • 返回多个子元素而不增加额外的 DOM 节点。
  • 避免在列表或表格中增加不必要的嵌套。
  • 使用条件渲染时避免不必要的嵌套元素。
  • map() 渲染列表时提供 key

通过使用 Fragment,你可以更精简、更高效地组织和渲染组件内容,同时保持 DOM 的整洁和性能。有些类似于vue中的template模版标签

相关推荐
得物技术3 小时前
前端日志回捞系统的性能优化实践|得物技术
前端·javascript·性能优化
陶甜也3 小时前
threeJS 实现开花的效果
前端·vue·blender·threejs
用户7678797737323 小时前
后端转全栈之Next.js 路由系统App Router
前端·next.js
OEC小胖胖3 小时前
Next.js数据获取入门:`getStaticProps` 与 `getServerSideProps`
前端·前端框架·web·next.js
薛定谔的算法3 小时前
JavaScript栈的实现与应用:从基础到实战
前端·javascript·算法
深圳外环高速3 小时前
React 受控组件如何模拟用户输入
前端·react.js
土了个豆子的3 小时前
03.缓存池
开发语言·前端·缓存·visualstudio·c#
手握风云-3 小时前
JavaEE 进阶第四期:开启前端入门之旅(四)
前端
魔云连洲4 小时前
React中的合成事件
前端·javascript·react.js