Suspense & Lazy2019-09-16 22:50

React 18 New: startTransition

之前必须要使用 lazy 才能配合 Suspense 的效果, React 18 提供了 useTransition 用于代替 lazy 的方法

/*

首先使用 useTransition, 用法很像 useState
返回一个 isPending, 也就是 isLoading
同时返回一个 callback: startTransition
*/
const [isPending, startTransition] = useTransition();


/* 调用 startTransition 的时候就会让 Suspense 显示 Loading 直到调用完毕 */
function handleClick() {
  startTransition(() => {
    setTab('football');
  });
}

<Suspense fallback={<Loading/>}>
  <div style={{opacity: isPending ? 0.8 : 1 }}>
    {tab === 'cricket' ? <Cricket /> : <Football />}
  </div>
</Suspense>

React: Suspense & Lazy

Suspense 的特性:

  1. 里面的元素需要用 lazy 包裹
  2. 内部所有组件 全部 resolved 之后才会显示.
  3. 内部组件没有加载完成需要显示一个 Loading 或者其他 fallback 内容
const Cat = React.lazy(() => import('./Cat'));

function MyComponent() {
  // Displays <Spinner> until Cat loads
  return (
    <React.Suspense fallback={<Spinner />}>
       <Cat />
    </React.Suspense>
  );
}

Error Boundary

TODO

参考文献

Powered by Remix
|
Designed by szhshp
|
Copyright © szhshp 2022