从0.66.5升级到0.71.3后,React原生复杂视图的重新渲染速度非常慢

x33g5p2x  于 2023-03-09  发布在  React
关注(0)|答案(1)|浏览(118)

我有自己的日历组件,它总是一次呈现三个月,每个月包含6周,每个月包含7天。每一天都有一个可触摸的不透明度,它设置日历组件的选定日期。这意味着每天更改时要重新呈现大量视图。日期组件是记忆的,除非选定了日期,否则不应该重新呈现。
我使用flipper来诊断渲染时间。在react-native 0.66.5上,整个渲染大约花费了50毫秒。在0.73.1上,它花费了超过500毫秒。我没有修改代码中的任何其他内容。
奇怪的是,回忆录似乎只对旧版本起作用。

t9aqgxwy

t9aqgxwy1#

每次选择新日期或将新月份对齐时,三个月中的所有日期(当前、之前和之后)重新呈现。虽然您在Day上做了备注,但它没有影响,因为在src/month.tsx中,每次重新渲染都调用createMatrix函数,该函数在三个月内为每个Day创建全新的组件,因此性能受到影响。
一个可能的解决方案是记住Month

export default memo(Month, (prevProps, nextProps) => {
  if (prevProps.month !== nextProps.month) {
    // render new month due to month change
    return false;
  }
  if (
    typeof nextProps.month !== 'string' &&
    nextProps.selectedDay?.get('month') === nextProps.month.get('month')
  ) {
    // month does not change, but new date is selected. Only re-render the
    // month where the newly selected date is in it.
    return false;
  }
  return true;
});

注解应该是自解释的。其效果是Month只在两种情况下重新呈现:
1.新的一个月即将到来
1.在当前月份中选择新日期
使用此备忘录以及Day上的备忘录,每次选择新日期时,仅重新呈现两个Day组件:一个是之前选择的一天,一个是新选择的一天。我没有检查新的渲染时间,只是从视觉上看,它要快得多。

相关问题