- はじめに ReactコンポーネントのStateについて学んだので、今度はStateの管理方法を理解する時です。GeekとGalが、React開発で重要な概念を案内してくれます。
ReactコンポーネントでのStateの管理方法について詳しく見ていこうね！
うん、もっと知りたいよ！
よかった！Stateを効果的に管理するためには、ルートに近い場所にStateを保持し、必要に応じてStateをリフトアップするなどのベストプラクティスに従うことが大切だよ。
- ルートに近い場所にStateを保持する
ルートに近い場所にStateを保持するという考え方は、Stateを高いレベルのコンポーネントに格納して、子コンポーネントにPropsとして渡しやすくするためだよ。
ああ、なるほど。Stateを高いレベルに保持することで、他のコンポーネントとの管理や共有が容易になるんだね！
その通り！これにより、不要な再レンダリングが防止され、パフォーマンスも向上するのよ。
- Stateのリフトアップ
兄弟コンポーネント間でStateを共有する必要がある場合があるね。そのような場合には、Stateを最も近い共通の祖先に移動させて、Stateをリフトアップするの。
Stateのリフトアップの例を教えてもらえる？
もちろん！例えば、ComponentAとComponentBという2つの兄弟コンポーネントが、Stateの一部を共有する必要があるとしよう。親コンポーネントであるParentComponentにStateを移動させるのはこんな感じね：
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
sharedValue: ''
};
}
render() {
return (
<div>
<ComponentA sharedValue={this.state.sharedValue} />
<ComponentB sharedValue={this.state.sharedValue} />
</div>
);
}
}
わかった！ParentComponentにStateをリフトアップして、ComponentAとComponentBの両方にPropsとして渡すんだね！
バッチリ！これで、両方のコンポーネントが親コンポーネントを通じて共有されたStateにアクセスし、更新することができるようになるのよ。
- 面白い例
Stateの管理の面白い例はある？
絵文字を使ってお互いの気分を更新できる「ムードチェンジャー」アプリを作ってみよう！彼らの気分を管理するために、Stateをリフトアップするわ。
import React, { useState } from 'react';
function MoodChanger() {
const [friendAMood, setFriendAMood] = useState('😀');
const [friendBMood, setFriendBMood] = useState('😀');
return (
<div>
<h2>Friend A's mood: {friendAMood}</h2>
<button onClick={() => setFriendAMood('😂')}>Make Friend A Laugh</button>
<h2>Friend B's mood: {friendBMood}</h2>
<button onClick={() => setFriendBMood('😍')}>Make Friend B Love</button>
</div>
);
}
はは、それは楽しい例だね！ムードチェンジャーアプリで二人の友達の気分を効果的にStateで管理しているんだね！
気に入ってもらえてうれしいわ！適切なState管理でさらに魅力的なアプリを作成し続けてね！