React中Fragment的使用

React中布局代码中return只能返回有一个元素，如果返回多个并列元素时就会报错：

解决办法就是在并列元素外层包裹一层父元素，如下所示：

export default class Demo extends React.Component {constructor(props) {super(props)this.dataList = [{ name: 'Javascript', desc: 'Javascript....' },{ name: 'React', desc: 'React....' },{ name: 'Vue', desc: 'Vue....' },{ name: 'Html', desc: 'JHtml....' },]}render() {return (// 包裹一层div父元素<div className='list-wrap'>{this.dataList.map((item) => {return (// 包裹一层父元素<div key={item.name}><h1 className='name-wrap'>{item.name}</h1><p className='desc-wrap'>{item.desc}</p></div>)})}</div>)}
}

但是，这样无形中就增加了浏览器渲染的压力，如果包裹的层级太深，就会影响性能。

上例中的渲染结果：

为了解决这个问题，我们可以使用React.Fragment。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

export default class Demo2 extends React.Component {constructor(props) {super(props)this.dataList = [{ name: 'Javascript', desc: 'Javascript....' },{ name: 'React', desc: 'React....' },{ name: 'Vue', desc: 'Vue....' },{ name: 'Html', desc: 'JHtml....' },]}render() {return (// 使用Fragment<Fragment className='list-wrap'>{this.dataList.map((item) => {return (// 使用Fragment<Fragment key={item.name}><h1 className='name-wrap'>{item.name}</h1><p className='desc-wrap'>{item.desc}</p></Fragment>)})}</Fragment>)}
}

由运行结果可以看出，Fragment没有增加dom节点，比第一个例子少了两层。但是界面渲染却是一样的。

React中Fragment的使用相关推荐

关于React中Fragment及Helmet标签
Fragment标签在布局时,有事会看到<Fragment>标签,这个标签有什么用呢? React.Fragment 官方文档: React 中一个常见模式是为一个组件返回多个元素.Fr ...
React中Fragment标签和空标签的使用(vue中的template标签类似)
Fragment作用: 类似于vue中的template标签,将当前dom不渲染后页面.在多层循环中可以添加key属性,其他属性不可以添加.不然会警告,提示只能有key属性和children vdom ...
react中纯函数_如何在纯React中创建电子邮件芯片
react中纯函数 by Andreas Remdt 由Andreas Remdt 如何在纯React中创建电子邮件芯片 (How to create email chips in pure Reac ...
React中如何优雅的捕捉事件错误
React中如何优雅的捕捉事件错误前话人无完人,所以代码总会出错,出错并不可怕,关键是怎么处理. 我就想问问大家react的错误怎么捕捉呢? 这个时候: 小白:怎么处理? 小白+: ErrorBo ...
七十六、React中的TodoList和拆分组件，组件之间的传值
2020/11/18. 周三.今天又是奋斗的一天. @Author:Runsen 这东西已经有很多大佬们写过了,就不多班门弄斧了.主要使用这个例子入门 React ,包括 state.props.组件 ...
React中的状态管理---Mobx
Mobx的介绍 Mobx是一个功能强大,上手非常容易的状态管理工具.redux的作者也曾经向大家推荐过它,在不少情况下可以使用Mobx来替代掉redux. Mobx流程图 Mobx使用流程创建项目 ...
react 给一个引用的组件添加新属性_高阶组件在React中的应用
高阶组件的定义接受React组件作为输入,输出一个新的React组件. 概念源自于高阶函数,将函数作为参数,或者输出一个函数,如map,reduce,sort. 用haskell的函数签名来表示: ...
[react] 在react中遍历的方法有哪些？它们有什么区别呢？
[react] 在react中遍历的方法有哪些?它们有什么区别呢? 有React.Children.map和 React.Children.forEach这两个方法,他们的参数都是在组件中接受prop ...
React中diff算法的理解
React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...

React中Fragment的使用

React中Fragment的使用相关推荐

最新文章

热门文章