React.lazy 和 suspense 如何使用？

React.lazy 和 suspense 如何使用？

React.lazy 可以让你延迟加载组件，只有在组件需要渲染时才会加载，这样可以提高应用的性能。它的用法是这样的：

import lazy from'react';

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

function MyApp() {
  return (
  <div>
  <LazyComponent />
  </div>
  );
}

export default MyApp;

而 Suspense 则是用于处理异步操作的，比如数据加载。它可以让你的应用在数据加载时显示一个占位符，等数据加载完成后再显示实际的内容。使用 Suspense 需要搭配useEffect和Promise来实现，比如：

import { Suspense } from'react';

function DataComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
  const fetchData = async () => {
  const response = await fetch('https://example.com/data');
  const data = await response.json();
  setData(data);
  };
  fetchData();
  }, []);

  if (!data) {
  throw new Promise.reject();
  }

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

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

export default App;

在这个例子中，DataComponent会在数据加载完成后显示数据，如果数据还没加载完成，就会显示一个 "Loading..." 的占位符。