react native 性能优化 总结

rn性能优化 结合网上资料总结如下

1、首屏渲染问题。采用JS Bundle拆包解决。就是主体框架react单独打成一个基础包，一旦进入app就马上加载，而相关业务模块单独拆分成多个包，进入相应模块才动态加载。这样可以大大加快APP的启动速度，各个业务也能独立开发，各自维护、下载、更新

2、图片问题。rn开发时本地图标为了统一往往放在js端，极端时（如一个页面加载几十上百张图片）可能会有性能问题。这是因为如果资源从 javascript 包中加载， RN 需要先从包中拿到资源，然后通过bridge把资源传送到 原生UI 层去渲染。而如果资源已经存在在原生端，那么 React 可以直接告知 UI 层去渲染具体的图片，无需通过这个bridge引入或者转入图片资源。 当然不会有这类问题，但是要js端图片要注意压缩，使其不太大，图片越大，性能问题越容易凸显。webP，jpg优先

3、缓存。各种需要的，有必要的缓存，如一个生日日期选择picker组件，数据源大概有100(年)x12(月)x30(天)这么多条数据，如果每次弹出picker都需要计算这些数据，还是会稍微有点延迟，这里可以缓存下来，甚至本地数据存储起来，以后拿出来直接使用

4、延迟加载。页面打开，优先执行那些跟页面展示有关的代码，其他的如埋点，上传状态，gif动画都可以稍后执行。对那些触摸响应事件后才需要展示的组件，或者根据接口返回才能决定是否展示的组件，一开始甚至都可以不用import，直到确定要展示时才局部import导入组件展示。对长列表页面，图片较多时，在页面范围之外的图片可以先不展示，直到滚动后发现图片在屏幕上面显示了再展示

5、动画。普通动画如移动，缩放等直接使用LayoutAnimation，性能更好。复杂点的动画才使用Animated。对帧动画这种需要快速更新state触发动画的场景，可以使用setNativeProps直接修改原生属性（某些场合如背景动画，gif图片可能不是很好的选择，因为gif可能会很大，导致初次解压时出现明显卡顿现象，而且安卓上gif图片首轮显示效果不佳）。
Animated： useNativeDriver为true，则会一次性将动画信息发送给原生端让原生去驱动动画，性能更佳。 否则js端会不断注册定时器事件，让原生端不断回调js方法更改组件的setNativeProps值产生动画，因为动画配置信息在每一帧都在原生和js端通信性能有所损耗，
问题： 为什么不总是使用useNativeDriver？ 是因为有些动画原生不支持么？

6、响应速度。由于js是单线程，当在执行一些计算量很大的任务时可能会造成堵塞卡顿现象。此时可以将任务稍微延后执行，避免大量任务在同一个js 事件循环中导致其他任务无法执行。相应的方法有InteractionManager,requestAnimationFrame,setTimeOut(0)等，原理都大同小异

7、刷新问题。每次setState导致的render都会进行一次内存中diff计算，尽管diff效率很高(O(n))，但是还是应该避免不必要的diff。 Pure组件、自定义shouldComponentUpdate实现避免不必要的刷新

8、预加载。对一些重要的，很可能会用到的内容预先加载，例如图片浏览器，当浏览某一张图片时可以预加载前后两张图片，优化用户体验。

9、FlatList的优化。
页面中的重头戏FlatList，尽管经过了大量优化，在数据较多时使用还是需要注意的。
FlatList的频繁刷新问题很常见，如下面

class FlatListTest extends React.Component {

    state = {
        index: 1,
        data: []
    }

    componentDidMount() {
        let data = [];
        for (let index = 0; index < 100; index++) {
            data.push(index);
        }
        this.setState({ data })
    }

    renderItem = (item) => {
        console.log('表格刷新了');
        return (
            <View style={{ height: 50 }}>
                <Text>
                    {item.item}
                </Text>
            </View>
        )
    }
    render() {
        console.log('页面刷新了');
        return (
            <View>
                <FlatList
                    style={{ width: SCREEN_W, height: 444 }}
                    data={this.state.data}
                    keyExtractor={(_, index) => index + ''}
                    renderItem={this.renderItem}
                    ListFooterComponent={<View style={{ width: 100, height: 20, backgroundColor: 'red' }} />}
                />

                <TouchableWithoutFeedback onPress={() => this.setState({ index: this.state.index + 1 })}>
                    <View style={{ width: 100, height: 100, backgroundColor: 'red' }}></View>
                </TouchableWithoutFeedback>

            </View>
        )
    }
}

这样子写FlatList看起来没什么问题，但是性能上完全具有优化空间
点击下方红色按钮让index累加，页面会刷新，但是也会导致FlatList刷新，renderItem被调用98次，就是说页面刷新->表格刷新->所有的表格cell也会刷新。很显然当有大量cell时容易造成性能问题。

FlatList是一个PureComponment，只会对传入的属性进行浅比较(对象地址比较)，发现不一样就会刷新。

例子中，FlatList的style，keyExtractor，ListFooterComponent这三个地方传入的对象在页面刷新时会重新生成，导致传入FlatList的属性地址发生变化，FlatList刷新。可以采用下面的方式修复。

    renderFooter = () => {
        return <View style={{ width: 100, height: 20, backgroundColor: 'red' }} />
    }

    keyExtractor = (_, index) => {
        return index + ''
    }

  getItemLayout = (_, index) => {
        return { length: 50, offset: 50 * index, index }
    }

    render() {
        console.log('页面刷新了');
        return (
            <View>
                <FlatList
                    style={styles.flatStyle}
                    data={this.state.data}
                    keyExtractor={this.keyExtractor}
                    renderItem={this.renderItem}
                    ListFooterComponent={this.renderFooter}
                    getItemLayout={this.getItemLayout}
                />

                <TouchableWithoutFeedback onPress={() => this.setState({ index: this.state.index + 1 })}>
                    <View style={{ width: 100, height: 100, backgroundColor: 'red' }}></View>
                </TouchableWithoutFeedback>

            </View>
        )
    }

const styles = StyleSheet.create({
    flatStyle: { width: SCREEN_W, height: 444 }
});

原则就是确保页面刷新后，传入FlatList的所有对象地址不发生变化，这样就不会导致不必要的刷新。

getItemLayout的设置也比较重要，设置后，则列表滚动时，新出现cell时就不用动态去测量cell高度，可以直接从这里拿到，优化性能

把上面的实现改成Hook，会发现页面刷新又会导致表格刷新，因为Hook组件每次刷新时内部的函数都会被重新定义，也就是函数地址发生了变化，从而导致FlatList的刷新。这里需要使用useCallback将所有函数都缓存好，避免函数组件刷新导致函数从新被定义，如下这样，注意依赖

const renderItem = useCallback((item) => {
        console.log('表格刷新了');
        return (
            <View style={{ height: 50 }}>
                <Text>
                    {item.item}
                </Text>
            </View>
        )
    }, [])

本人项目中有个类似微信朋友圈的列表，当数据很多时，在debug环境下点击图片浏览时稍微会有卡顿现象。纠其原因就是因为点击图片浏览触发页面刷新，所有cell跟着刷新完成后才会显示大图导致卡顿，用如上优化后就ok了。

其他：

FlatList显示规则是，在ScrollView上面添加View，只渲染当前展示和即将展示的 View，距离远的 View 用空白 View 展示，从而减少长列表的内存占用。

FlatList的item无法复用，目前了解到的是跟js单线程有关，具体不太明白

重要属性：

getItemLayout，如果不使用，那么所有的 Cell 的高度，都要调用 View 的 onLayout 动态计算高度，这个运算是需要消耗时间的；
为什么需要动态计算每一个View高度？ 想一想如果不测量，那么原生端View的Frame如何设置就可以理解了。

windowSize: 表征缓存屏幕外的item多少，单位是一个屏幕显示的item数量。默认为21。例如一个屏幕能显示8个item，那么默认情况下，屏幕上下各缓存10*8个item， 减少该数字能减小内存消耗并提高性能，但是快速滚动列表时，遇到未渲染的空白view几率增大。这里要注意，因为只有当列表停止滚动时才会更新渲染区域，所以只要item足够多，一直滚动不要停止就一定能看到空白view。

maxToRenderPerBatch: 每批次渲染的item个数，默认为10. 例如一个屏幕能显示8个item, 列表停止时默认情况下需要缓存屏幕上下各80个item， 那么需要16个批次才能完成，如果列表停留时间不够用户马上又继续滚动，因为此时缓存的item数量还不够，可能出现滚不动的现象。 如果该值变大则会使所需批次减少，缓存足够item所需时间减小，用户体验更好。 但是如此js一个事件循环任务过多可能导致其他的如列表响应问题。 有时候设置该值是必要的，比如一个长列表，每屏幕能显示下20个item，那么默认情况maxToRenderPerBatch为10就显得太小，滑动时很容易出现滑不动现象，可以适当放大该值。

removeClippedSubviews: 剪切子视图，移除屏幕外较远位置的所有item，优化内存。iOS上面有bug，安卓默认开启。 主要是在ListView时期长列表优化内存使用。

10、hook自定义组件
例如我项目中自定义了个button组件

export const Button = memo((props) => {
    let children = props.children;
    let { disabled, loading, style, onPress } = props;
    if (typeof children == 'string') {
        children = <Text style={{ color: 'white', fontSize: 18 }}>{children}</Text>
    }
    let defaultStyle = {
        height: 45, marginLeft: 15, marginRight: 15, alignItems: 'center', justifyContent: 'center',
        backgroundColor: ColorConf.main(), borderRadius: 5, opacity: loading || disabled ? 0.5 : 1, flexDirection: 'row'
    }
    if (style) {
        defaultStyle = { ...defaultStyle, ...style }
    }
    return (
        <TouchableWithoutFeedback onPress={() => !disabled && onPress && onPress()}>
            <View style={defaultStyle}>
                {loading ? <ActivityIndicator animating={true} color='white' style={{ marginRight: 8 }} /> : null}
                {children}
            </View>
        </TouchableWithoutFeedback>
    )
})

用memo包裹起来跟class时代的pure组件差不多，每次会对传入的props进行浅比较，若不一致才会更新组件

  <Button
      disabled={!(name && password)}
      loading={logining}
      style={{ marginTop: 50 }}
      onPress={_loginInWithPassword} >
        Login In
 </Button>

如果像这样使用，那么每当父组件刷新时，由于传入Button的style是一个临时对象，Button会随着父组件一同刷新，显然是不合适的
同上面，应该如下使用

const _loginInWithPassword = useCallback(() => console.log('点击登陆') },[])

 <Button
      disabled={!(name && password)}
      loading={logining}
      style={styles. buttonStyle}
      onPress={_loginInWithPassword} >
        Login In
 </Button>

const styles = StyleSheet.create({
    buttonStyle: { marginTop: 50 }
});

使用useCallback，useMemo等缓存函数，组件等的时候要注意设置好依赖，否则可能出现值捕获等隐性问题

11、使用Fragment
Fragment和View都可以包裹子元素，但是前者不对应具体的视图，仅仅是代表可以包装而已，跟空的标识符一样

 <React.Fragment>
      <ChildA />
      <ChildB />
    </React.Fragment>

  <>
      <ChildA />
      <ChildB />
    </>

 <View>
      <ChildA />
      <ChildB />
    </View >

如上，前面两个完全一样，原生端只存在ChildA和ChildB两个组件。最后那个不一致，对应原生端为View父视图包含ChildA和ChildB两个个组件
视图层级关系减少有利于视图渲染

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,242评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,769评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,484评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,133评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,007评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,080评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,496评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,190评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,464评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,205评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,567评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2赞 335