<Fragment> (<>...</>)

通常用法

<Fragment> 通常使用 <>...</> 代替，它们都允许你在不添加额外节点的情况下将子元素组合。

<>
  <OneChild />
  <AnotherChild />
</>

渲染 Fragment 列表 

在这种情况下，你需要显式地表示为 Fragment，而不是使用简写语法 <></>。当你在循环中渲染多个元素时，你需要为每一个元素分配一个 key。如果这个元素为 Fragment 时，则需要使用普通的 JSX 语法来提供 key 属性。

function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

<Profiler>

<Profiler> 允许你编程式测量 React 树的渲染性能。

可以用于测量整个应用，也可以测量部分，还可以嵌套测量。

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

// 测量部分
<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <PageContent />
</App>

//测量多个部分，嵌套测量
<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content>
      <Profiler id="Editor" onRender={onRender}>
        <Editor />
      </Profiler>
      <Preview />
    </Content>
  </Profiler>
</App>

onRender函数

当调用 onRender 回调函数时，React 会告诉你相关信息。

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  // 对渲染时间进行汇总或记录...
}

• id：字符串，为 <Profiler> 树的 id 属性，用于标识刚刚提交的部分。如果使用多个 profiler，可以通过此属性识别提交的是树中的哪一部分。
• phase：为 "mount"、"update" 或 "nested-update" 中之一。这可以让你知道组件树是首次挂载还是由于 props、state 或 hook 的更改而重新渲染。
• actualDuration：在此次更新中，渲染 <Profiler> 组件树的毫秒数。这可以显示子树在使用记忆化（例如 memo 和 useMemo）后的效果如何。理想情况下，此值在挂载后应显著减少，因为许多后代组件只会在特定的 props 变化时重新渲染。
• baseDuration：估算在没有任何优化的情况下重新渲染整棵 <Profiler> 子树所需的毫秒数。它通过累加树中每个组件的最近一次渲染持续时间来计算。此值估计了渲染的最差情况成本（例如初始挂载或没有使用记忆化的树）。将其与 actualDuration 进行比较，以确定记忆化是否起作用。
• startTime：当 React 开始渲染此次更新时的时间戳。
• commitTime：当 React 提交此次更新时的时间戳。此值在提交的所有 profiler 中共享，如果需要，可以对它们进行分组。

<StrictMode>

使用 StrictMode 来启用组件树内部的额外开发行为和警告，可以对整个应用或者部分开启严格模式。

严格模式启用了以下仅在开发环境下有效的行为：

• 组件将 重新渲染一次，以查找由于非纯渲染而引起的错误。
• 组件将 重新运行 Effect 一次，以查找由于缺少 Effect 清理而引起的错误。
• 组件将被 检查是否使用了已弃用的 API。

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

<Suspense>

<Suspense> 允许在子组件完成加载前展示后备方案。

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

• children：真正的 UI 渲染内容。如果 children 在渲染中被挂起，Suspense 边界将会渲染 fallback。
• fallback：真正的 UI 未渲染完成时代替其渲染的备用 UI，它可以是任何有效的 React 节点。后备方案通常是一个轻量的占位符，例如表示加载中的图标或者骨架屏。当 children 被挂起时，Suspense 将自动切换至渲染 fallback；当数据准备好时，又会自动切换至渲染 children。如果 fallback 在渲染中被挂起，那么将自动激活最近的 Suspense 边界。