美文网首页
性能优化

性能优化

作者: couriravant | 来源:发表于2020-01-07 18:41 被阅读0次

    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.
    

    相关文章

      网友评论

          本文标题:性能优化

          本文链接:https://www.haomeiwen.com/subject/bzxdactx.html