如何在React JS中呈现之前等待状态？

在React JS中呈现之前的等待状态可以通过以下几种方式实现：

使用条件渲染：在组件的render方法中，根据某个状态变量来判断是否显示等待状态。例如，可以使用一个布尔类型的状态变量isLoading来表示是否正在加载数据，如果isLoading为true，则显示等待状态，否则显示实际内容。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      data: null
    };
  }

  componentDidMount() {
    // 模拟异步加载数据
    setTimeout(() => {
      this.setState({
        isLoading: false,
        data: 'Hello World'
      });
    }, 2000);
  }

  render() {
    const { isLoading, data } = this.state;

    if (isLoading) {
      return <div>Loading...</div>;
    }

    return <div>{data}</div>;
  }
}

使用React的suspense和lazy：suspense和lazy是React 16.6版本引入的新特性，用于实现组件的懒加载和等待状态的呈现。可以使用React.lazy函数来动态加载组件，并使用React.Suspense组件来包裹需要等待的组件，并在等待时显示自定义的等待状态。

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

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