ReactのStateでの状態管理はReactをやっていく上ではもっとも重要となります
Stateを制する者はReactを制すると言っても過言ではありません。
なのでReactの状態管理について深掘りしていきましょう！！。
まずはおさらいをしましょう。
State
Reactの状態管理
Reactでは基本的に親コンポーネントが主役です、なので親コンポーネントでアプリの状態(state)で管理します。
親のstateで保持されたデータはpropsによって子供達へ渡されていきます。
class App extends React.Component {
render() {
return (
<div>
<h1>親コンポーネントです</h1>
<Child title="親から子へ" />
</div>
);
}
}子のコンポーネント
{/* 引数にpropsで受けとる */}
const Child = (props) => {
{/* それを変数として代入 */}
const title = props.title
return(
<div>
<h1>子のコンポーネントです<h1>
{ title }
{/* 表示*/}
</div>
)
}親と子だけの関係でコンポーネント間でのデータ渡しならpropsを1度渡すだけで大丈夫ですが、
子から子になるとバケツリレー式状態です。
propsは一度代入され渡されると子のコンポーネントでは変更する事はできません。
そして値の受け渡しは子から親へは基本的に渡す事はできない事になっています
ですがやむを得ずどうしてもやりたい場合は??
親のコンポーネントで変更するコールバック関数を作成しその関数をpropsで子へ渡し
渡された子のコンポーネント内でコールバック関数を呼び出します。
そうする事によりStateの値が変更可能となります
ですが１つ１つの管理が大変になってきます。
Reactでの状態管理を行う際に手っ取り早いのはReactのフレームワークであるReduxを使用しての状態管理です。
ReduxにはStoreと言われるのがあり、アプリ内にあるStateを全て保管する場所があります。
それの何が良いのか？
つまり、本来のState管理なら親の下に沢山の子がおりツリー構造になってるのを想像してください。
バケツリレー式で渡されていきます、しかし先程も言ったようにReduxの Storeは全てのStateを管理しています
Stateで管理されたデータの倉庫みたいなものです、
バケツリレー式で渡していかなくてもStoreを間に挟み必要なデータだけを管理していきます。
変更された状態を受け取ったStoreはコンポーネントにその状態を渡し、その状態を受け取った
コンポーネントは再描画を行い、ブラウザの表示内容を変更します。
Stateの状態管理が肥大化し複雑になると管理も大変ですがReduxを用いればその問題が解消されます。
ReduxはグローバルなStateを管理するためのReactのフレームワークなのです。
ですが初心者が使用すると思うと中々難しいかもしれません。
状態管理の変化 Hooks
今では状態管理はclassコンポーネントから関数コンポーネントでの状態管理へと移り変わっています。
理由はHooks APIの実装により大きく変わりました
今まではクラスを用いての状態を保持するコンポーネント作成だったのが、単純にそれを関数でも使用できるようになったそれだけです。
つまり『state』などのReact機能をクラスを書かずに使用する事が可能となり、クラス無しでライフサイクルを扱えます。
propsによるバケツリレーも少なくなり、
もちろんクラスを定義するまでの長い記述もしなくて済むのでコード量もコンパクトに見やすくなります。
そして何よりもクラスでのthisの挙動やbindこの辺りの意識をしなくて済みます。
それがReactの関数型コンポーネントのHooks機能です。
クラスStateなしの場合関数型コンポーネントでは
useStateメソッドを使用し状態を管理します。
クラスを使わずライフサイクルの場合は『useEffect』メソッドを使用します。
クラスのライフサイクルで使用する3つのメソッドこれらをuseEffectで同じ事ができます。
React/Hooks & Reduxを掛け合わせてやってみるとかも面白いかもしれませんね。
長年に渡り状態管理するならReduxが唯一の選択肢でした、ですがReact 16.3からContext APIが登場
Context API ??
Context APIはReactアプリのコンポーネント間でデータのやりとり(共有)する方法です
小規模なアプリ開発であれば最適なリソースが豊富となっております。
ReduxとContext APIの違いとしては、グローバルで状態管理をするかローカルで状態管理をするかになります。
ざっくりですいません。
そして最近では、Metaこと旧Facebook社によって提唱された実験的な状態管理ライブラリである
Recoilが登場しました。
Stateを管理するライブラリです
Context APIが抱える制約・問題を解決するためにMetaによって提唱された実験的な状態管理ライブラリ
Reactアプリのすべてのコンポーネントが状態を簡単に共有できボイラープレートコードのセットアップが不要なReduxと比較して最小限となっています。
Reactを学ばれてる方は、React/Hooks・Redux・Recoilこの辺りでコンポーネントの状態を上手く管理していけるように皆さん共に頑張って勉強していきましょう！