My-Notes

002.Components

6分钟阅读

<Fragment>

通常写作 <>...</>，将多个 JSX 节点分组（包裹）在一起

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

Props：

  • key（可选）：使用显式 <Fragment> 语法声明的片段可以具有 key

注意：

  • 要将 key 传递给片段，则不能使用 <>...</> 语法。必须从 'react' 显式导入 Fragment 并使用 <Fragment key={yourKey}>...</Fragment>
  • 关于状态是否会重置：React 状态保存行为

<Suspense>

显示回退，直到其子级完成加载

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

Props：

  • children：打算呈现的实际 UI。如果 children 在渲染时暂停，Suspense 边界将切换到渲染 fallback
  • fallback：在实际 UI 尚未完成加载时呈现的替代 UI
    • 任何有效的 React 节点都被接受，但实际上，后备是轻量级占位符视图，例如加载旋转器或骨架
    • 当 children 挂起时，Suspense 会自动切换到 fallback ，当数据准备好时，又会切换回 children
    • 如果渲染时 fallback 暂停，它将激活最近的父 Suspense 边界

注意：

  • 只有 Suspense-enabled 的数据源才会激活 Suspense 组件，包括：
    • 使用支持 Suspense 的框架（例如 Relay 和 Next.js）获取数据
    • 使用 lazy 来延迟加载的组件
    • 通过 use 读取 Promise 的值
  • 在 Effect 或事件处理程序中获取数据不会触发 Suspense
    • 用于将数据源与 Suspense 集成的官方 API 将在 React 的未来版本中发布
  • 如果 Suspense 正在显示树的内容，但随后再次挂起，则 fallback 将再次显示，除了由 startTransition 或 useDeferredValue 引起的更新
  • 如果因为再次暂停而需要隐藏已经可见的内容，会清理内容树中的 LayoutEffect。当内容准备好再次显示时，React 将再次触发布局效果。这可确保测量 DOM 布局的效果在内容隐藏时不会尝试执行此操作
  • React 包括与 Suspense 集成的底层优化，例如流服务器渲染和选择性水合。阅读架构概述并观看技术讲座以了解更多信息

<Profiler>

以编程方式测量 React 树的渲染性能

如果正在寻找交互式分析器（而不是编程方式），请尝试 React Developer Tools 中的 Profiler 选项卡，它公开了与浏览器扩展类似的功能

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

Props：

  • id：标识符，字符串类型
  • onRender：每次分析树中的组件更新时 React 都会调用的 onRender 回调，它接收有关渲染内容和花费时间的信息
    • onRender(id, phase, actualDuration, baseDuration, startTime, commitTime)
    • id：Props 中的 id，有多个 <Profiler> 时用于标识
    • phase：渲染时期，"mount"、"update" 或 "nested-update"
    • actualDuration：当前更新渲染 <Profiler> 及其后代所花费的毫秒数。这表明子树使用记忆化的程度（如 memo 和 useMemo）。理想情况下，该值应该在初始安装后显着下降，因为许多后代仅在其特定 Prop 发生变化时才需要重新渲染
    • baseDuration：估计在不进行任何优化的情况下重新渲染整个 <Profiler> 子树所需的毫秒数。它是通过总结树中每个组件的最新渲染持续时间来计算的,该值估计最坏情况下的渲染成本（例如初始安装或没有记忆的树）。将 actualDuration 与它进行比较，看看记忆是否有效
    • startTime：React 开始渲染本次更新的数字时间戳
    • commitTime：React 提交当前更新的数字时间戳。该值在提交中的所有分析器之间共享，以便在需要时可以对它们进行分组

注意：

<StrictMode>

启用额外检查和警告（仅开发环境），帮助您及早发现错误

<StrictMode>
  <App />
</StrictMode>

严格模式支持以下仅限开发的行为：

  • 组件将多一次重新渲染来查找由不纯渲染引起的错误
  • 将多一次运行 Effects，以查找因缺少 Effect 清理而导致的错误
  • 将检查是否使用了已弃用的 API

注意：

在 <StrictMode> 包裹的树中无法选择退出严格模式，这使您确信 <StrictMode> 内的所有组件都已检查。如果开发产品的两个团队对于检查是否有价值存在分歧，他们需要达成共识或将 <StrictMode> 在树中向下移动

反向链接

关系图谱