ReactNative
Reactをネイティブアプリとして動かすラッパー
ReactNativeの画面遷移事情
Reactには、画面をVirtualDOMで構築する・・・以外の関心がない。そのため、画面遷移機能自体が無い
これは、"Reactのラッパー"である所のReact Nativeにも言える。
そのため、別途サードパーティの、画面遷移パッケージを入れる(か、自作するか)しないといけない
ReactNative公式としては、ReactNavigationが、React層だけで完結するとして推奨されている。
また、ネイティブ層も絡めた画面遷移を行う場合は、ReactNativeNavigationがおすすめとのこと
親からJSXを受け取る場合の型定義
https://qiita.com/irico/items/629fe8f617ceb10e990f
React.ReactNode型を使う
View関連
FlatList。よく使う
https://reactnative.dev/docs/flatlist
性能関連
type vs interface
https://qiita.com/tkrkt/items/d01b96363e58a7df830e
基本的にはtypeを使った方が良い
実践 React Native 設計チェックシート
ReactNativeで開発を始める際に必要になる検討事項
Reactフレームワークを使うならこの限りではないかも
FlatListの使用方法
一覧を作る時は、基本的にFlatListを使う
FlatListのプロパティに、より性能改善するオプションがある(可用性を失う)
ReactNativeのパフォーマンスについて
RootのsetStateはなるべく変えない(ルートに近い階層で再レンダリングさせないよう気を付ける)
リリースビルドでdev=trueにしない
console.logをなるべく消す
またはbabel-plugin-transform-remove-consoleを入れる
大規模なListViewは、FlatListやSectionListへの置き換えを検討する
アニメーションにはuseNativeDriver:trueを設定する
アルファ合成するような描画(画像の上にテキストを乗せる等)は、shouldRasterizeIOS / renderToHardwareTextureAndroidの使用を検討する。メモリに負荷をかけるらしいので注意
画像サイズを変更するアニメを実装する時は、transform: [{scale}]style プロパティを使用する
onPress内でアニメーションとデータ処理を同時に行っている場合、onPressの関数が終わるまでアニメーションが実行されない時がある。requestAnimationFrameでラップすると良い
Reactパフォーマンス最適化
本番用ビルドを使用する
長いリストにはウィンドウイング(リストの一部だけ実体化させるテクニック)を試みる
react-window と react-virtualized は人気があるウィンドウイング処理のライブラリ
コンポーネントの更新要否判断は、props及びstateのアドレス比較で行っている
つまり、オブジェクトや配列において、プロパティの更新をしただけでは、レンダリングが実施されない
この場合、配列の場合はconcatやスプレッド構文([...hoge, "fuga"]) オブジェクトの場合はObject.assignやスプレッドプロパティ構文({...hoge, fuga: "piyo"})を使う
複雑なオブジェクトをイミュータブルに取り扱う際は、Immer や immutability-helper を検討する
Webフロントエンドパフォーマンスチューニング80選
スプラッシュ画面
react-native-bootsplashを使う
使用例: https://zenn.dev/ri9/scraps/d3c26af063c67b