开发建议

Fabric 禁用 findNodeHandle 方法

说明: findNodeHandle 已废弃, Fabric 模式下会直接抛出异常, 请使用 ref 获取组件实例

尽量避免频繁使用 measure* 方法

说明: measure* 类的方法 Fabric 模式下会变成同步执行, 如果频繁调用会对线程造成压力, 从而导致交互卡顿.

如果不需要获取 PageX/Y, 可以再 onLayout() 中获取到宽高等信息

频繁调用 setState() 更新时, 建议使用 setNativeProps()

说明: 因 Fabric 升级废弃了 setNativeProps(), 并且建议将其全部修改为 setState() ,但现在业务线中有频繁调用setNativeProps()的场景,

如果替换成 setState() 会导致频繁触发渲染, 大大降低了页面流畅度. 替换 setState() 没办法支持所有业务线场景.

现在我们已经把setNativeProps()补充回来了. 频繁调用的场景还是可以使用 setNativeProps(). 可以按需使用.

设置 zIndex 必须设置 position

这其实是旧版 RN 就挖下来的坑, 旧版 RN 默认就是 position: 'relative' , 相当于我们在不指定 position 的情况下, 直接设置 zIndex 也是生效的.

新版本中默认是 position: 'static', 并且严格遵循层叠上下文, 所以要使 zIndex 生效，需要确保以下几点：

  • 要使用绝对定位（position: 'absolute'）或固定定位（position: 'fixed'）的元素。只有这些元素才能受到 zIndex 属性的影响。

  • 确保要设置 zIndex 的元素的父元素也是绝对定位或固定定位的，否则 zIndex 设置可能会受到父元素的限制。

  • 确保 zIndex 的值是一个整数，较大的值会在屏幕上显示在较小的值之上。

使用差值动画实现动画时, 需要在动画结束后重置动画值

因Fabric架构实现问题, 差值动画运动后会出现 Native 和 C++ 不同步的问题. 进而导致点击效果可能会失效.

所以在动画做完之后重置动画值可以主动将目标值同步给 C++, 这样便可以避免不同步导致的点击问题,以及动画闪动的问题

尽量使用 FLatList, 每个 Cell 尽量为定高

ListView, ScrollView 在数据量较大,cell 结构复杂的情况下, 性能会很差, 尽量使用 FLatList 可以有效提升性能.

因为 FLatList 复用的逻辑, 可能会出现快速滑动时出现白屏情况, 这种情况有几个优化点:

  • 避免在renderItem中进行大量计算和数据处理。应尽量将这些处理逻辑放到组件外部进行处理，减少渲染的压力。

  • 将列表项的高度提前计算好，传递给FlatList，可以避免在滑动时动态计算高度导致的卡顿。

  • 对于大量数据的情况，可以考虑使用分页加载，每次加载少量数据，减少渲染压力。

  • 对于非必要的渲染，可以考虑使用shouldComponentUpdate或React.memo等方式进行优化，避免不必要的重渲染。

  • 使用虚拟化列表，比如react-window或react-virtualized等库，可以避免渲染不可见的部分，提高渲染性能。

  • 合理使用FlatList提供的属性，比如initialNumToRender、windowSize等，可以根据具体情况进行调整。

版本升级