Angular React Vue 比较 – 组件篇之内置组件

本篇文章是组件篇的最后一篇，我们将探讨一下三大框架本身的内置组件。

Angular 的内置组件

在 Angular 中并没有内置组件，它只有一些内置指令。

虽然 Angular 官方把指令也称为一种特殊的组件，不过我们还是把指令在另外的篇章中讨论，就不在组件篇里讨论了。

React 的内置组件

React 提供了一些内置的组件，我们可以在 JSX 中使用它们。

组件	描述
<Fragment>	<Fragment> 通常使用 <>…</> 代替，它们都允许你在不添加额外节点的情况下将子元素组合。
<Profiler>	<Profiler> 允许你编程式测量 React 树的渲染性能。
<StrictMode>	<StrictMode> 帮助你在开发过程中尽早地发现组件中的常见错误。
<Suspense>	<Suspense> 允许在子组件完成加载前展示后备方案。

<Fragment>

当我们需要单个元素时，我们可以使用 <Fragment> 将其他元素组合起来，使用 <Fragment> 组合后的元素不会对 DOM 产生影响，就像元素没有被组合一样。在大多数情况下，<Fragment></Fragment> 可以简写为空的 JSX 元素 <></>。

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

<Fragment> 还可以有一个可选参数 key ，如果我们要传递 key 给一个 <Fragment>，不能使用 <>...</>，必须从 'react' 中导入 Fragment 且表示为<Fragment key={yourKey}>...</Fragment>

import { Fragment } from 'react';

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

<Profiler>

我们使用 <Profiler> 包裹组件树，以测量其渲染性能。进行性能分析会增加一些额外的开销，因此 在默认情况下，它在生产环境中是被禁用的。

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

参数：

• id：字符串，用于标识正在测量的 UI 部分。
• onRender：onRender 回调函数，当包裹的组件树更新时，React 都会调用它。它接收有关渲染内容和所花费时间的信息。

<StrictMode>

我们可以使用 StrictMode 来启用组件树内部的额外开发行为和警告。

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

const root = createRoot(document.getElementById('root'));
r