react-native学习总结

A、导航栏Navigation

1、无法pop到指定router，快速连续点击容易出现重复push，集成Redux解决

2、对某一个页面比如登录页，想让它的以modal形式弹出，将登录页面用modal包装后弹出，而非navigation的push

3、navigation设置多个参数时，多个参数要一起写在setParams方法里面，否则前面设置的那个参数无效。而且该方法会导致页面重新渲染，没法避免

B、列表

1、都没实现复用功能，对长列表，内存、渲染性能问题很严重，removeClippedSubviews、pageSize、initialListSize属性都可以优化性能，但都有各自问题，不能乱用

2、removeClippedSubviews，默认true，将屏幕外一定距离远的item移除，优化内存。但是偶尔会出现列表不显示，需要手动拖拽一下才出现的bug

3、pageSize，每一帧渲染的item个数，默认为1。长列表时，快速上拉会造成渲染速度过慢，cpu一直在处理渲染事件而延迟响应现象，若设置过大，cpu占用会很高

4、initialListSize，真机才有效，列表初始化时渲染的item个数，若页面push时因为渲染过多造成卡顿，可以设置为1，减少页面初始渲染量，避免卡顿

5、item在数据对象变化(非对象属性)时才会重新渲染，so，改变item对象的一个属性值是没有用的，需要深拷贝对象，再改变对象的属性才有效

6、item是可以实现单行刷新，局部拷贝的。整个数据源深拷贝也可行，但是大量数据时会造成性能低下，响应延迟

C、数据库Realm

1、AsyncStorage存储大量数据时性能很差，采用Realm做数据存储

2、数据库迁移方法一旦执行，数据库版本号就必须加1才行，否则不会再执行。而且每次都要xcode重启才管用。。。

3、增删改操作后，数据库会做一个被修改的标记，此前所有数据库的查询操作结果，下一次被使用时都会重新去查询一次结果。有时这是个方便，有时是个bug，特别是删除操作后

D、Redux

1、自带跨页面传值效果

2、方便的和Navigation集成在一起，解决导航栏的一些问题

3、单一的store对象，一旦保存了数据，如果不自己清理，则会一直存在。经常会出现进入A页面，改变数据，退出A页面，再次进入A页面发现上次的数据残留

4、连续多次响应同一个Action，若返回的结果一样，则页面不会刷新。可以自己手动重置数据解决

5、当Redux和Navigation集成之后，disaptch的那个方法不能传递特殊函数来回调，否则崩溃。比如下面所示，这里的特殊方法比如Navigation的setParams，goBack等，可以用setTimeOut或者requestAnimationFrame解决，前者作用时将该函数插入到当前调用堆栈的最末尾，后者是让操作在下一帧执行

E、性能优化

1、主要是列表性能，上面的那几个属性有时很有用。还有局部刷新，局部拷贝。FlatList和SectionList是列表的最新版，性能更佳，但是快速滑动会出现空白，且上拉加载至没有数据后footer不好处理

2、RN的计算性能很好，性能一般都在渲染上面，减少页面渲染量，降低层级关系，折叠视图，首次进入部分加载等

3、点击事件响应延迟问题。

3.1、点击后push到新页面，新页面渲染量太大造成卡顿，可以想办法减少新页面渲染数据，或者在新页面用InteractionManager延迟加载数据的时机，先让页面push再加载数据渲染页面

3.2、列表item点击后响应延迟，采用列表pageSize=10，提升滚动时渲染item的速度，且采用局部深拷贝单行刷新减少计算量解决

3.3、点击按钮刷新页面时出现的卡顿，用requestAnimationFrame解决

4、动画时，尤其是那种如定时器一直改变某个属性的动画，可以采用setNativeProps避免频繁渲染页面出现的性能问题

F、其他

1、flexWrap:'wrap'属性让视图换行时，必须配合alignItems:'flex-start'，否则不能保证准确的换行效果

2、安卓键盘把tabbar顶起来，可以在安卓目录android/app/src/main/AndroidManifest.xml中，添加android:windowSoftInputMode="stateAlwaysHidden|adjustPan|adjustResize"，在iOS用IQKeyBoardManager

3、网络状态监控组件NetInfo，真机测试ok，模拟器测试回调结果经常出错