React 中异步加载组件的一种常见方式是使用动态 import() 语法。该语法可以在运行时动态地加载一个模块，并返回一个 Promise 对象，该对象在模块加载完成后解析为该模块的默认导出对象。

例如，假设有一个名为 MyComponent 的组件，我们可以像这样异步加载它：

js
const MyComponent = React.lazy(() => import('./MyComponent'));

这里使用了 React.lazy() 方法，它接受一个返回组件的函数，并返回一个新的组件，该组件在第一次渲染时异步加载指定的组件。

然后，我们可以像这样在组件中使用 MyComponent：

js
function MyParentComponent() {
  return (
    <div>
      <React.Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </React.Suspense>
    </div>
  );
}

在这个例子中，<React.Suspense> 组件用于在异步加载 MyComponent 时显示一个加载指示器。fallback 属性接受一个加载指示器的 React 元素，例如 <div>Loading...</div>。一旦 MyComponent 加载完成，它将显示在父组件中。

需要注意的是，使用 React.lazy() 只能异步加载默认导出的组件。如果需要异步加载其他导出，可以使用标准的动态 import() 语法：

js
const myFunction = async () => {
  const { namedExport } = await import('./myModule');
  // 使用 namedExport
};

总之，React 中异步加载组件的常见方式是使用 React.lazy() 方法和动态 import() 语法。并且我们还可以利用 <React.Suspense> 组件来处理异步加载资源时页面应该如何显示的问题。