React Native パフォーマンス最適化 - 2020-10-15 RN Tech Blog

Transcript

1. React Native パフォーマンス 最適化 ワダタカヒコ @takahi5
2. 和田崇彦(ワダタカヒコ) @takahi5 • DeNA > マリクル > 独立 • React Nativeでアプリ開発 • React NativeのUdemyコース を作ったり
3. スポーツ観戦を楽しくするアプリ • リアルタイム実況 • 応援 • ギフティング SpoLive
4. 今日話すこと パフォーマンス最適化
5. 起動に時間がか かる スクロールが カクカクする APIで情報取得 するのに 時間がかかる ボタンタップの 反応が悪い パフォーマンス最適化
6. メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 パフォーマンス最適化
7. メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他
8. メインスレッドとJSスレッド Main (Native) Thread JavaScript Thread Bridge UI ビジネス ロジック
9. JS側が忙しくなりがち メインでできることはメインに Main (Native) Thread JavaScript Thread Bridge UI ビジネス ロジック
10. useNativeDriver Animatedでアニメーションしている場合 useNativeDriverオプションをtrueに
11. useNativeDriver メイン (Native) JavaScript Bridge +1px +2px +3px +4px メイン (Native) JavaScript Bridge 1秒間で +10px動かして OK 1秒間で+10pxだから... 次のフレームは〜 useNativeDriver = false useNativeDriver = true
12. メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 レンダリング回数を減らす
13. レンダリング回数 = stateの更新回数 × (更新対象の)コンポーネント数
14. 実験: 親のstateが更新されるとどうなるのか? App state.count LargeItem MiddleItem SmallItem 関係ないstateの countを更新してみる
15. 結果: 全ての子が再レンダリング App state.count LargeItem MiddleItem SmallItem 更新 render render render
16. メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 stateの更新を減らす
17. stateの更新を減らす① 画面描画と関係ない変数はuseRefを利用
18. stateの更新を減らす② そもそもの更新回数を減らす
19. stateの更新回数を減らす - SpoLive事例 ⚽ ⚽ state更新 state更新 state更新 state更新 state更新
20. メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 更新対象のコンポーネントを減らす
21. memo化 (or PureComponent) propsに変化(*)がない場合は再レンダリングしない *浅い比較
22. memo化(or PureComponent) で FlatListを最適化してみよう
23. 実験: FlatList ※FlastList自体は PureComponent
24. 結果: FlatList render render render count 更新
25. 便利ツール: why-did-you-renderでチェック！ renderItemが同じ名前だけど 別オブジェクトって判定されてるよ 原因: アロー関数が都度生成されている
26. useCallback で関数の再生成を防ぐ
27. さらに... FlatListの子コンポーネントもmemo化しよう 子コンポーネントも memo化しておく
28. SpoLive事例: memo化 Before After memo化 FlatList全体で 71.5ms → 1.7ms react-devtoolsにて計測
29. メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 その他(罠?)
30. Stackされた裏の画面が更新 フィード フォロー 更新
31. FireStoreの通信処理自体が負荷に onSnapShot onSnapShot onSnapShot onSnapShot onSnapShot
32. メインスレッド JSスレッド レンダリング state更新 更新対象の コンポーネント その他 ・useNativeDriver ・useRef ・そもそも更新減らす ・memo化 ・裏の画面 ・通信など まとめ
33. 最後に • パフォーマンスが気になったらやりましょう • 初めから最適化する必要はない • まず計測から
34. PR スポーツファン(サッカー,ラグビーなど) の方、是非お試しを！ エンジニアも募集中です！ Udemyの React Native + Firebaseコース twitter(@takahi5)プロフ欄にクーポンあります！