我有自己的日历组件,它总是一次呈现三个月,每个月包含6周,每个月包含7天。每一天都有一个可触摸的不透明度,它设置日历组件的选定日期。这意味着每天更改时要重新呈现大量视图。日期组件是记忆的,除非选定了日期,否则不应该重新呈现。
我使用flipper来诊断渲染时间。在react-native 0.66.5上,整个渲染大约花费了50毫秒。在0.73.1上,它花费了超过500毫秒。我没有修改代码中的任何其他内容。
奇怪的是,回忆录似乎只对旧版本起作用。
我有自己的日历组件,它总是一次呈现三个月,每个月包含6周,每个月包含7天。每一天都有一个可触摸的不透明度,它设置日历组件的选定日期。这意味着每天更改时要重新呈现大量视图。日期组件是记忆的,除非选定了日期,否则不应该重新呈现。
我使用flipper来诊断渲染时间。在react-native 0.66.5上,整个渲染大约花费了50毫秒。在0.73.1上,它花费了超过500毫秒。我没有修改代码中的任何其他内容。
奇怪的是,回忆录似乎只对旧版本起作用。
1条答案
按热度按时间t9aqgxwy1#
每次选择新日期或将新月份对齐时,三个月中的所有日期(当前、之前和之后)重新呈现。虽然您在
Day
上做了备注,但它没有影响,因为在src/month.tsx
中,每次重新渲染都调用createMatrix
函数,该函数在三个月内为每个Day
创建全新的组件,因此性能受到影响。一个可能的解决方案是记住
Month
。注解应该是自解释的。其效果是
Month
只在两种情况下重新呈现:1.新的一个月即将到来
1.在当前月份中选择新日期
使用此备忘录以及
Day
上的备忘录,每次选择新日期时,仅重新呈现两个Day
组件:一个是之前选择的一天,一个是新选择的一天。我没有检查新的渲染时间,只是从视觉上看,它要快得多。