React Native从0.66.5升级至0.71.3后自定义日历组件重渲染卡顿求助

问题背景 #

自研日历组件，每次渲染3个月内容（每月6周，每周7天），日期节点基于TouchableOpacity实现选中交互，已对日期子组件做memo处理。React Native 0.66.5版本下切换选中日期整体渲染耗时约50ms，升级至0.73.1后耗时超500ms，且memo仅在旧版本中生效。

核心排查与修复方向 #

1. 排查 TouchableOpacity 底层实现变更 #

React Native 0.70+ 对TouchableOpacity的底层实现做了调整，可能引入了额外的重渲染触发点，导致memo失效：

• 替代方案：改用Pressable组件，手动控制按压状态，减少内部不必要的状态更新。
• 临时修复：给每个TouchableOpacity添加唯一且稳定的key，确保组件标识不被RN误判。

2. 修复 React 18 对 memo 浅比较的逻辑变化 #

RN 0.73.1 对应React 18.2.0，而0.66.5对应React 17.x，React 18对memo的浅比较逻辑有细微调整：

• 检查日期组件的props：如果传递了内联函数（如onPress={() => handleSelect(date)}），每次渲染都会生成新引用，直接导致memo失效。
• 修复方法：用useCallback包裹选中回调函数，用useMemo缓存对象类型的props，确保引用稳定。

3. 调整批量更新逻辑 #

React 18的自动批量更新机制在部分场景下可能改变更新时机，间接放大渲染开销：

• 用ReactNative.unstable_batchedUpdates包裹状态更新逻辑，确保所有选中状态变更一次性触发渲染，避免多次零散更新。

4. 检查父组件的 memo 处理 #

如果日历的月容器、周容器等父组件未做memo处理，父组件重渲染时会强制所有子日期组件跟着重渲染：

• 用Flipper的React DevTools查看重渲染组件列表，确认是否存在父组件无差别触发子组件重渲染的情况，给父组件也添加memo处理。

验证步骤 #

1. 先替换TouchableOpacity为Pressable，观察渲染耗时变化。
2. 用useCallback和useMemo稳定所有传递给日期组件的props，再检查重渲染范围。
3. 用Flipper Performance插件对比新旧版本的渲染调用栈，定位具体的性能差异点。

内容的提问来源于stack exchange，提问作者Michal Bachratý