1.react加载指示器Suspense

Suspense是React 16.6版本中引入的新特性，用于在异步渲染过程中暂停组件的渲染，并在等待异步操作完成时显示一个加载指示器。下面是一个简单的使用示例：

import React, { Suspense } from 'react';

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

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

在这个例子中，我们使用React.lazy异步加载MyComponent组件，并将其包装在Suspense组件中。当MyComponent组件正在加载时，Suspense组件会显示一个加载指示器，这里我们使用了一个简单的文本“Loading…”。

需要注意的是，fallback属性可以是任何React元素，因此你可以根据需要自定义加载指示器的样式和内容。

2.unstable_createRoot 异步渲染根节点

unstable_createRoot是React 16版本中引入的新特性，用于创建一个异步渲染的根节点。下面是一个简单的使用示例：

import React from 'react';
import ReactDOM from 'react-dom';

const root = ReactDOM.unstable_createRoot(document.getElementById('root'));

function App() {
  return <h1>Hello, World!</h1>;
}

root.render(<App />);

在这个例子中，我们使用unstable_createRoot创建了一个根节点，并将其渲染为一个简单的Hello World应用程序。注意，我们使用了unstable_createRoot而不是ReactDOM.render来渲染应用程序。这是因为unstable_createRoot启用了React的异步渲染模式，可以提高应用程序的性能。