まずリロードの定義に関して描く必要があります。
リロードの定義ってなんじゃ?説明していきましょう。
一般的にリロードというのはF5キーを叩いてWebサーバからHTMLファイルを受け取り直して
そのHTMLファイルに従って画面構成を作り直すというものを指します。
しかし、JSフレームワークやJSフレームワークで構築したSPAでそのリロードは完全に悪手です。
HTMLファイルそのものは殺風景なあれですよね。
そこからは全てJavaScript起動によりReactというJSフレームワークを実行し、
JSXファイルに従ってページ構成を作り直すということを指します。
つまり、これを1からやるのは、テンプレートによる差分書き換えで低コストでぱぱっと画面遷移するSPAの目的からは大きくハズレたものになります。
なので、JSフレームワークでF5リロードと同じ事はしてはいけません。
それでもいいならJavaScriptのグローバル変数領域にlocationというオブジェクトがあるので、
reloadメソッドを実行すればリロードされます。
JavaScript
1location.reload()
JSフレームワーク流儀に従ったリロードというのは、
AjaxでWebサーバに最新の情報を問い合せて、
JSフレームワーク世界の値を最新の情報で上書きしてやることで、
表示されているDOMの中身を最新のもので描画し直すことを指します。
そのためには何の情報を全て揃えれば「リロード出来た」とみなしても構いませんか?
これの定義が第一段階になります。
しかしReactそのものは親子のコンポーネント感でstateを受け渡しすることしか出来ません。
なので、ひ孫の孫のコンポーネントのボタンをクリックしたらReact世界全体のコンポーネントを最新にするため、
あちこちのstateのやり取りを書く事になり、端的に言えば「あなた死ぬわよ」。
そこで、グローバル領域にstate置き場を作って管理します。
このやり方でReactでメジャーになっているstate管理用ライブラリがReduxです。
流れはこんな感じになるでしょう。
- 現状のReactをReduxによるstate管理で再構築しなおす
- ButtonをクリックしたらAjaxを飛ばしてWebサーバから最新の情報を取得しなおす
- データを受け取ったらReduxのルールに従ってstateを更新
- 後はReactとReduxが協力してDOMツリーを最新の状態にリフレッシュしてくれる
React+Reduxは超メジャーなので、
日本語訳された記事やチュートリアルがそこらじゅうにあるのでちょっと調べれば入門出来ると思います。
頑張ってくださいね。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/09 06:00