在 React / React native 中使用循环或递归以进度百分比获取大量数据

Question

您好，我正在编写一个从 Android 版本 4.4.4 到 最新 的 react 本机应用程序。我有一种情况需要下载 数百万 条记录，然后存储到本地数据库 (using watermelon DB)。我正在对记录进行分页并使用 xhr 请求获取数据（一次 10000 个）。

获取和存储都是异步操作。我可以使用循环或递归来做到这一点。

递归片段：

dataFetch = async () => {
    if (maxPages && page > maxPages) {
      return true;
    }
    const { data } = await axios.get(API_GET_RECORDS, {
      params: {
        page,
        per_page: 10000,
      },
    });
    if (data.data && data.data.length === 0) {
      return true;
    }
    await addIntoDatabase(this.props.database, data.data);
    if ((maxPages || data.max_pages) && page) {
      this.setState({
        message: `Loading ${Number.parseFloat(
          (page * 100) / (maxPages || data.max_pages),
        )}%`,
      });
      // console.log((page * 100) / (maxPages || data.max_pages));
    }
    return this.dataFetch(page + 1, data.max_pages);
  };

循环片段

dataFetch = async () => {
    let page = 1;
    let maxPages;
    do {
      const { data } = await axios.get(API_GET_RECORDS, {
        params: {
          page,
          per_page: 10000,
        },
      });
      await addIntoDatabase(this.props.database, data.data);
      if (data.max_pages && page) {
        this.setState({
          message: `Loading ${Math.round((page * 100) / data.max_pages)}%`,
        });
      }
      page += 1;
      maxPages = data.max_pages;
    } while (page < maxPages);
  };

函数调用

downloadMyDataAndDoOtherTask = () => {
 // ... some task
 dataFetch(); // you should get all the data then start executing next line
 // ... some other task depends on this task;
}

1. 在这种情况下最好的方法循环或递归是什么？

2. 当我们在任何类型的循环或递归中执行 setState 时，它​​不会立即更新 (Batch update concept)。如果我想在这种情况下显示一些进度百分比，我该如何显示。因为 react 不会在所有迭代中更新，所以进度会落后于实际进度。

提前致谢。

编辑

两种方式（循环和递归）在下载大约 2-3 次缺少数据后应用程序都崩溃了。

Answer 1

您可以使用递归方法并使用 setState 回调进行下一次迭代：

dataFetch = async () => {
  // ...
  this.setState({
    message: `Loading ${Number.parseFloat(
      (page * 100) / (maxPages || data.max_pages),
    )}%`,
  }, () => {
    InteractionManager.runAfterInteractions(() => {
      this.dataFetch(page + 1, data.max_pages);
    });
  });
};

这样，它会先把你的进度设置在 state 中，等 state 更新后继续获取。