【React优化】React.Fragment、React.PureComponent和React.lazy()

最新推荐文章于 2025-02-25 10:35:53 发布

原创最新推荐文章于 2025-02-25 10:35:53 发布 · 442 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

38 篇文章

订阅专栏

本文深入探讨React中的Fragment用法，如何利用它来优化组件结构，避免不必要的DOM节点。同时，介绍React.lazy()和Suspense组件，实现组件的延迟加载，提升应用性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这三个东西没有必要的相关性，只是今天查资料一起学习了。

React.Fragment

场景： 用于为一个组件返回多个元素。

官方文档：

React 中一个常见模式是为一个组件返回多个元素。以前我都是在外层加一个div包裹，Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。

Fragments 看起来像空的 JSX 标签：

render() {
  return ( // 需要括号
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

另一种使用片段的方式是使用 React.Fragment 组件，React.Fragment 组件可以在 React 对象上使用。这可能是必要的，如果你的工具还不支持 JSX 片段。注意在 React 中， <></> 是 <React.Fragment/> 的语法糖。

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

带 key 的 Fragments

<></> 语法不能接受键值或属性。
如果你需要一个带 key 的片段，你可以直接使用 <React.Fragment /> 。
key 是唯一可以传递给 Fragment 的属性。

ps：React16开始，render支持返回数组，可以减少不必要的节点嵌套。上面的代码也可以写成这样：

return [
	<Modal/>
	<ConfirmModal/>
]

React.lazy() 和 Suspense

场景： 组件延迟加载。

动态 import 主要应用场景是延迟加载方法，对于组件来说，并不是很适用，但是 React.lazy 对于组件的加载则是有比较大的帮助。

目前明确指出，React.lazy 和 suspense 并不适用于服务端渲染。

例子：

import React, { Component, Suspense } from 'react';

const Child = React.lazy(() => import('./components/Child'));

class Analysis extends Component{

	render(){
		return <Suspense fallback={<div>loading...</div>}>
            <Child/>
          </Suspense>
	}
}