Question

由于React本机应用程序的性能存在可怕的问题，可以通过在几个事件中延迟渲染组件来解决？

考虑一个例子，

我有一个应用程序，该应用程序从API提取数据并将其呈现在清单中。平面列表中的每个组件都有Touchable事件。

现在的问题是发生滚动事件时桥接完成，并且我们希望在达到结束阈值后立即从API中获取更多数据。

JS将它们呈现到RCTView中，但同时也在忙于获取导致UI冻结的数据。

能否延迟最后一次渲染，直到遇到JS线程完全空闲为止？还是有更好的解决方案？

Answer 1

由于您正在获取主线程上的数据，并假设数据足够复杂以至于处理起来可能会延迟UI线程，所以最好等到下一次重绘来获取和处理数据。

使用requestAnimationFrame()函数将数据提取部分的执行延迟到UI完成执行为止。

let response = await fetch("https://emberall.com/user/1/recordings");
let recordingsJSON = await response.json();

function processRecording(recordingIndex) {
  if (recordingIndex < recordingsJSON.length) {
    mergeRecordingToLocalDatabase(recordings[recordingIndex]);
    requestAnimationFrame(() => processRecording(recordingIndex + 1));
  }
}
processRecording(0);

示例从https://corbt.com/posts/2015/12/22/breaking-up-heavy-processing-in-react-native.html

复制而来

React Native延迟渲染

1 个答案: