React Native 延迟渲染答案

【问题标题】：React Native delayed renderReact Native 延迟渲染
【发布时间】：2019-01-10 20:59:50
【问题描述】：

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

考虑一个例子，

我有一个从 API 获取数据并将它们呈现在平面列表中的应用程序。 flatlist 中的每个组件都有 Touchable 事件。

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

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

可以延迟最后一次渲染，直到我们遇到 JS 线程完全空闲？或者有没有更好的解决方案？

【问题讨论】：

标签： performance react-native render bridge

【解决方案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复制的示例

【讨论】：

我想你误解了我的意思。举个例子。我想从 API 获取项目到平面列表中。我点击 API 并将数据加载到平面列表中。现在，如果我开始快速向下滚动，flatlist 中的可触摸对象会冻结，因为线程正忙于获取数据，而滚动发生在 Native Realm 中。