LoginSignup
4
3

More than 3 years have passed since last update.

遅いReact Nativeアプリのパフォーマンスを向上する対策

Posted at

昔書いたものなので情報が古いかも

対策

Try to use React Native's FlatList/SectionList/VirtualizedList where you can and not array.map() as it allows for asynchronous rendering of components in your viewport which is important for mobile devices.

  1. FlatList/SectionList/VirtualizedListを使う
  2. shouldComponentUpdateかPureComponentを使用する
  3. React Navigation使わない
  4. initialNumToRenderを設定する
  5. renderItemにはステートレスコンポーネントを指定する
  6. 1つのコンポーネントに複数のFlatList/SectionList/VirtualizedListを使わない
  7. ScrollView内でFlatListをラップしない
  8. 先にAndroidを開発する
  9. リリースビルドで確認する
  10. console.xxxを削除する(babel-plugin-transform-remove-console)
  11. JavaScriptコードを減らす(ネイティブコードを増やす)

1. FlatList/SectionList/VirtualizedListを使う

リストなどでは、データをArray.map()して描画するのではなく、FlatList/SectionList/VirtualizedListを使う。

2. shouldComponentUpdateかPureComponentを使用する

Reactの性質上、あるコンポーネントが子コンポーネントが更新されると、子コンポーネントも更新されます。shouldComponentUpdateを定義することで、コンポーネントの更新を制御できます。また、そもそも厳密な更新が必要ない場合はPureComponentを使うと、変化がないと判定されたComponentはUpdateされにくいため、パフォーマンスが向上します。

情報元

https://github.com/facebook/react-native/issues/17033

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3