suspend-react

开源

React 组件的 Async/await

1.4K stars0 点赞2 次浏览

工具介绍

React 组件的 Async/await

```shell npm install suspend-react ``` 此库将您的异步操作集成到 React suspense 中。延迟状态和错误状态在父级处理，这使得单个组件免除了负担，并能够实现更好的协调。将其视为组件的 async/await。**适用于所有 React 版本 >= 16.6**。 ```jsx import { Suspense } from 'react' import { suspend } from 'suspend-react'

function Post({ id, version }) { const data = suspend(async () => { const res = await fetch(https://hacker-news.firebaseio.com/${version}/item/${id}.json) return res.json()
}, [id, version]) return (

) }

function App() { return ( <Suspense fallback={ }> ) }

#### API
```tsx
const suspend = <Keys extends Tuple<unknown>, Fn extends (...keys: Keys) => Promise<unknown>>(
  fn: Fn | Promise<unknown>,
  keys?: Keys,
  config?: Config
) => Await<ReturnType<Fn>>

typescript

// Function that returns a promise
const result = suspend((...keys) => anyPromise, keys, config)
// async function
const result = suspend(async (...keys) => { /* ... */ }, keys, config)
// Promise with keys
const result = suspend(anyPromise, keys, config)
// Promise itself is the key
const result = suspend(anyPromise)

suspend 会将控制权交还给 React,并终止渲染阶段。一旦您的 promise 解析完毕,它就会恢复。要使其正常工作,您需要将其包装成一个 <React.Suspense> 块,这需要您设置一个 fallback (可以为 null)。

依赖项（第二个参数）起到缓存键的作用，可以使用任意多个。如果某个条目已在缓存中，使用相同的键调用 suspend 将立即返回该条目，而不会中断渲染阶段。缓存访问与 useMemo 类似，但 遍历组件树。第一个参数必须是一个 Promise，或者返回 Promise 的函数，或者异步函数。它会接收键作为参数。 suspend 将返回已解析的值，而不是一个 Promise！这一点是有保证的， 您不需要检查有效性。错误将冒泡到最近的错误处理器。