什么是 @thg303/react-async-render?
@thg303/react-async-render 是一个 React 组件，用于处理组件的异步渲染，它能够在组件还没有完全渲染之前显示一个预加载的状态。
这个包的优点是它非常轻量，使用起来也很简单，只需要几行代码就可以轻松地处理异步渲染。
怎么使用 @thg303/react-async-render？
安装
使用 npm 或 yarn 安装 @thg303/react-async-render：
npm install @thg303/react-async-render
或
yarn add @thg303/react-async-render
使用
首先，要在你的组件中导入 @thg303/react-async-render：
import AsyncRender from '@thg303/react-async-render';
然后，就可以将它包裹在你的代码中：
<AsyncRender promise={myPromise} loading={<Loading />} error={<Error />}>
{(result) => <MyComponent value={result} />}
</AsyncRender>其中，myPromise 是一个返回数据的 Promise，Loading 和 Error 是自定义的组件，MyComponent 是你的业务组件。
在 AsyncRender 中，当 promise 被解决时，它会执行传递给它的子级函数，使你可以根据 promise 返回的结果来动态渲染你的组件。
示例代码
让我们来看一看下面的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- -----------------------------
----- --------- - ----- -- -- -
----- -------- - ----- ------------------------------------------------------
------ ----- ----------------
--
----- ------- - -- -- ------------------
----- ----- - -- -- --------------
----- ----------- - -- ----- -- -- ---------------------
------ ------- -------- ----- -
------ -
------------ --------------------- ----------------- --- ------------- ----
--------- -- ------------ -------------- ---
--------------
--
-这段代码会通过 fetch 函数异步获取一个待办事项的数据，并在请求完成后在页面上渲染这个数据的标题。
在这个示例中，我们将 AsyncRender 组件包裹在 MyComponent 内部，让 AsyncRender 组件来处理异步渲染。我们传递了一个 promise 参数，它会解释成在 AsyncRender 内部调用的一个 Promise 对象。同样，我们还传递了 loading 和 error 作为参数，它们是我们自定义的组件，它们会在请求正在进行或发生错误时渲染。
最终，在 AsyncRender 内部，我们将返回的结果传递给了 MyComponent 组件。
总结
通过使用 @thg303/react-async-render，我们可以轻松地处理组件的异步渲染，这对于我们的开发工作来说是非常有用的。希望这篇文章能够帮助你更好地理解如何使用这个 npm 包，让你在开发中更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558ef81e8991b448d642a