rn的优化

 一、使用ref配合 setNativeProps

setNativeProps方法可以理解为web的直接修改dom。使用该方法修改View、Text等RN自带的组件，则不会触发组件的componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate等组件生命周期中的方法。

建议频繁更新的操作，如slider、tabs切换等拖曳操作时，使用setNativeProps来更新属性，会获得意想不到的性能体验。

this.View = React.createRef();
<View
                    ref={this.View}
                    style={{
                        height: 100,
                        backgroundColor: 'red',
                    }}
                />
<Text
                    style={{ backgroundColor: 'blue', height: 50 }}
                    onPress={() => {
                        console.log(this.View);
                        this.View.current.setNativeProps({
                            backgroundColor: 'green'
                        });
                    }}
                >
                    3333333
                </Text>

 二、 scrollView设置removeClippedSubviews

（实验特性）：当此属性为true时，屏幕之外的子视图（子视图的overflow样式需要设置hidden）会被删除。这个可以提升大列表的滚动性能。（参考官网）

<ScrollView
    removeClippedSubviews // 用于优化滑动列表（子元素需要设置overflow："hidden"）
    alwaysBounceVertical
>
    {
        data.map((item, index) => (
            <Text
                key={item.text}
                style={{ overflow: 'hidden' }}
            >
                {item.text}
            </Text>
        ))
    }
</ScrollView>

 三、flatlist设置getItemLayout属性

<View style={styles.big}>
                <View style={styles.scrolsty}>
                    <FlatList
                        //<
                        onRefresh={() => this._onRefresh()}
                        refreshing={this.state.isRefresh}
                        //>下拉刷新

                        ListHeaderComponent={this._createListHeader}
                        ListFooterComponent={this._createListFooter}
                        //创建头尾布局
                        ListEmptyComponent={this._createEmptyView}
                        //空布局
                        onEndReachedThreshold={0.1}
                        data={goods}
                        onEndReached={this.handlescroll.bind(this)}
                        keyExtractor={(item)=>item.text}　　　　　　//key值
                        renderItem={({item})=><View><Text>{item.text}</Text></View>}　　//item就是便利的数据结构，不过需要通过解构赋值来获取
           　　　　　　　　getItemLayout={(data, index) => ({
    　　　　　　　　　　　　　　length: 20,
    　　　　　　　　　　　　　　offset: 20 * index,
    　　　　　　　　　　　　　　index,
　　　　　　　　　　　　　　　})}
                    />
                </View>
            </View>

 四、使用交互管理器InteractionManager

如果在didmount中做了耗时操作，可使用

componentDidMount(){
   InteractionManager.runAfterInteractions(() => {
     this.fetchData();
   });
}

 五、Suspense

Suspense需配合React.lazy配合使用，

const Foo = React.lazy(() => import('./BBB'));
<Suspense fallback={<Text>111</Text>}>
                    <Foo />
                </Suspense>

注：参考 https://blog.csdn.net/sinat_17775997