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