在 React 开发中，使用 dva 数据流可以提高代码的可维护性和可读性。而 dva-atr 是 dva 的一个拓展包，它提供了便捷的异步数据加载，简化了异步数据的处理流程。
安装
使用 npm 安装：
npm install dva-atr
快速开始
1. 引入 importModule
import { importModule } from "dva-atr";2. 使用 importModule
yield call(importModule, {
moduleName: "example",
modules: () => import("./example"),
});在上面的代码中，我们引入了 importModule 方法，然后调用该方法，它接收一个对象作为参数。这个对象包含两个属性：moduleName 和 modules。在这里，我们的代码会异步加载 ./example 并将结果存储在 moduleName 下。
3. 引用 modules
在下面的代码中，我们可以通过 select 方法来获取存储在 moduleName 中的数据：
const Example = yield select((store) => store.example);
更进一步的使用
dva-atr 还提供了一些实用的方法来扩展 dva 后的功能，这些功能包括：缓存、同步加载、延迟加载等。
1. 缓存
dva-atr 提供了缓存机制，可以缓存所有异步加载的模块，这样可以避免多次加载同一个模块。
yield call(importModule, {
moduleName: "example",
modules: () => import("./example"),
cache: true,
});在这个例子中，我们通过将 cache 属性设置为 true，指定对 "./example" 做了缓存处理。
2. 同步加载
在某些情况下，我们不需要异步加载，需要使用同步加载。比如：React.lazy 等需要使用同步加载的情况。
dva-atr 提供了 importModuleSync 来处理同步加载：
import { importModuleSync } from "dva-atr";
const Example = importModuleSync(() => import("./example"));3. 延迟加载
在某些情况下，需要延迟加载模块，以避免更多的初始化时间。比如：折叠子级导航菜单。
实现延迟加载，只需要在 delay 属性中设置一个数字，以表示加载的延迟时间：
yield call(importModule, {
moduleName: "example",
modules: () => import("./example"),
delay: 1000,
});在这个例子中，我们将加载模块的延迟时间设置为 1000 毫秒。
示例代码
缓存和异步加载
-- -------------------- ---- -------
------ - ------------ - ---- ----------
--------- --------- -
----- ------------------ -
----------- ----------
-------- -- -- --------------------
------ -----
---
----- ------- - ----- -------------- -- ---------------
----- ----- ----- ---------- ----- ------- ---
-同步加载
import { importModuleSync } from "dva-atr";
const Example = importModuleSync(() => import("./example"));延迟加载
-- -------------------- ---- -------
------ - ------------ - ---- ----------
--------- --------- -
----- ------------------ -
----------- ----------
-------- -- -- --------------------
------ -----
---
----- ------- - ----- -------------- -- ---------------
----- ----- ----- ---------- ----- ------- ---
-至此，我们讲解了 dva-atr 的使用教程。它可以帮助你更方便地管理和加载异步数据，让你的 React 项目更加高效和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea081e8991b448dbf43