性能优化

shouldComponentUpdate:

  • 无论组件是否是 PureComponent,如果定义了 shouldComponentUpdate(),那么会调用它并以它的执行结果来判断是否 update。在组件未定义 shouldComponentUpdate() 的情况下,会判断该组件是否是 PureComponent,如果是的话,会对新旧 props、state 进行 shallowEqual 比较,一旦新旧不一致,会触发 update。
  • 浅判等 只会比较到两个对象的 ownProperty 是否符合 Object.js() 判等,不会递归地去深层比较---
    shallow comparison究竟是什么呢?
    对于基本类型(primitives),例如数字或者布尔值,来说,浅拷贝将会检查其值是否相同,例如1与1相等,true与true相等。对于引用类型的变量,例如复杂的javascript对象或者数组,来说,浅拷贝将仅仅检查它们的引用值是否相等。这意味着,对于引用类型的变量来说,如果我们只是更新了其中的一个元素,例如更新了数组中某一位置的值,那么更新前后的数组仍是相等的。)

keyExtractor

此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体,以便在刷新时能够确定其变化的位置,减少重新渲染的开销。

initialNumToRender

默认10
初始化render的item数量,最好能够保证满足一屏

windowSize

默认21
flatlist是scrollview实现,默认会缓存21屏的数据,包括当前可见部分,和上、下两部分各10屏,来保证流畅度,如果windowSize过少,可能增大白屏几率,如果windowSize多大,可能导致内存不足,oom。设置合适的windowSize来保证流畅度和内存的平衡。

tips: 关于shouldComponentUpdate

     * `Component` always returns true.
     * `PureComponent` implements a shallow comparison on props and state and returns true if any
     * props or states have changed.
     *
     * If false is returned, `Component#render`, `componentWillUpdate`
     * and `componentDidUpdate` will not be called.
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容