性能优化
2020-01-07 本文已影响0人
couriravant
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.