时间戳

首页 > 解决方案 > React Native 延迟渲染

performance - React Native 延迟渲染

问题描述

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

考虑一个例子，

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

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

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

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

标签： performancereact-nativerenderbridge

解决方案

由于您在主线程上获取数据并假设您的数据足够复杂以至于处理它会延迟 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/break-up-heavy-processing-in-react-native.html复制的示例

推荐阅读