react-native - 在 React Native 中设置大数组状态时如何消除 UI 的延迟？

Question

我React Native用来渲染一个Chart.

我的应用程序中有 3 个自定义tabs项，当在它们之间滑动时，我会获取新数据并应用翻译动画来突出显示选定的选项卡。

滚动时我面临 1 秒的延迟。我调查了延迟，其中有一个参数setState()导致它，这是一大组数据。

我已经在使用async / await.

我试图放入setState()asetTimeout但最终结果并不顺利。

有没有办法优化在状态中设置大数组？或者从setState()?

更新

await Animated.spring(translateBottomX, {
  toValue: type,
  duration: 100,
}).start();

if (segment === 1) {
  await Animated.parallel([
    Animated.spring(translateXBottomTabOne, {
      toValue: 0,
      duration: 100,
    }).start(),
    Animated.spring(translateXBottomTabTwo, {
      toValue: width,
      duration: 100,
    }).start(),
  ]);
} else if (segment === 2) {
  await Animated.parallel([
    Animated.spring(translateXBottomTabOne, {
      toValue: width,
      duration: 100,
    }).start(),
    Animated.spring(translateXBottomTabTwo, {
      toValue: 0,
      duration: 100,
    }).start(),
  ]);
} else if (segment === 3) {
  await Animated.parallel([
    Animated.spring(translateXBottomTabOne, {
      toValue: width,
      duration: 0,
    }).start(),
    Animated.spring(translateXBottomTabTwo, {
      toValue: width,
      duration: 100,
    }).start(),
  ]);
}

setTimeout(() => {
  this.setState({
    dataAxeX
  });
}, 500);

// 在这里使用

<XAxis
    data={dataAxeX}
    formatLabel={(_, index) => dataAxeX[index].Datetime}
    contentInset={styles.xAxisContentInset}
    svg={{
       fill: "#B6C1DF",
       ...styles.xAxisStyle,
     }}
 />

标签： react-nativereact-native-androidreact-native-ios