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…” 的占位符。