javascript - 跨微任务批处理 React 更新？

Question

我的代码看起来像:

// File1
async function fetchData() {
  const data = await fetch(...);
  setState({ data });
  return data;
}

// File2
useEffect(() => {
  (async () => {
    const data = await fetchData();
    setState({ data });
  })();
});

这会在 1 个任务中触发 2 个 React 提交。这使我的应用程序低于 60FPS。理想情况下，我想批量处理 2 setState s。目前，它看起来像这样:

粉色代表 React 提交(DOM 操作)。在第二次提交完成之前，浏览器没有机会重新绘制。我可以通过添加 await new Promise(succ => setTimeout(succ, 0)); 让浏览器有机会重新绘制 setStates之间，但如果我可以批量提交会更好。
重构它也几乎是不可能的，因为 useState存在于单独的文件中。
我试过 unstable_batchedUpdates但它不适用于异步。

Answer 1

您可以对 fetchData 进行分组，当使用相同的参数调用 fetchData 时，会检查缓存中的 promise 并返回该 promise ，而不是创建新的 promise (进行新的提取)。
当 Promise 解决时，该缓存条目将被删除，因此当组件再次挂载时，它将再次获取。要更改此行为，您可以将不同的缓存对象传递给组函数。

//group function (will always return promise)
const createGroup = (cache) => (
  fn,
  getKey = (...x) => JSON.stringify(x)
) => (...args) => {
  const key = getKey(args);
  let result = cache.get(key);
  if (result) {
    return result;
  }
  //no cache
  result = Promise.resolve(fn.apply(null, args)).then(
    (r) => {
      cache.resolved(key); //tell cache promise is done
      return r;
    },
    (e) => {
      cache.resolve(key); //tell cache promise is done
      return Promise.reject(e);
    }
  );
  cache.set(key, result);
  return result;
};
//cache that removes cache entry after resolve
const createCache = (cache = new Map()) => {
  return {
    get: (key) => cache.get(key),
    set: (key, value) => cache.set(key, value),
    //remove cache key when resolved
    resolved: (key) => cache.delete(key),
    //to keep cache:
    //resolved: () => 'NO_OP',
  };
};

//fetch data function
const fetchData = (...args) => {
  console.log('fetch data called with', args);
  return new Promise((resolve) =>
    setTimeout(() => resolve(args), 1000)
  );
};
//grouped fetch data
const groupedFetchData = createGroup(createCache())(
  fetchData
);
groupedFetchData(1, 2, 3).then((resolve) =>
  console.log('resolved with:', resolve)
);
groupedFetchData(1, 2, 3).then((resolve) =>
  console.log('resolved with:', resolve)
);