最近は専らreactに専念しているのですが、どうにもreactでできる自由が過ぎるのか
state管理によるDOMの操作も楽ということもあって無茶なコードを書いてしまいがちでした。
今回はreactで開発するにおいて自分が心がけていることを二つ紹介します。
やっていて気が付いたことなのでまだまだ増えると思うので知ってる範囲のみで述べていきます。
まず一つ目は、render回数を減らす。render回数が多い＝更新スピードが遅くなる。
あまりに更新回数が多い（遅い）とユーザーの離脱に直結します。要は余計なrenderをさせなければ良いので
componentDidUpdateを使ってパラメータが変わった箇所のみ更新することで
ムダなrender回数を減らすという考え方です。
componentDidUpdate(prevProps) {
if (this.props.name !== prevProps.name) {
//do something
}
}
nameの差異があれば値を更新するメソッドを設定します。画像が多いページでこれを使うと
おおよそ体感しやすいです。
二つ目は、react-router-domで遷移させたprop値をどう保持するか。
値を遷移先に渡したい時は、react-router-domのprop.location.stateを使って持たせることで
実現できます。受け取り先のコンストラクタでname:this.props.location.state.nameとすれば
これまでのstateと同じように振る舞うことができます。
ですが、ヘッダーに存在するページに遷移→また戻りたくなった時はどうするか？
戻り先のページではname:this.props.location.state.nameとして初期に設定されており、当然ヘッダーの
ページにはnameを保持するstateまたは値を渡す手段は無いのでそのまま戻ろうとすると当然undefinedになってしまう。
ここで自分が気を使ったのは戻り先のルートです。対策として、同じreact-router-domの機能である
this.props.history.push(‘/top’);を使って前ページでなくアプリの基準ページに戻ることで
この問題を解決させました。ゲーム要素がないアプリ又はメイン画面が決まっているアプリでなら
ページ跨ぎをしても引き続き機能を使うことができるので安牌かなと思います。
☓
props.history.goBack()
〇
this.props.history.push('/top');
以上自分の塩意見でした。
これからの開発においても今の自分の考え方に欠陥があった場合はまた見直して
ブログに書いていきたいと思います。
