React コンポーネントの状態管理

Reactを使うのに欠かせない状態管理について
アウトプット

なぜStateを使うのか

Reactコンポーネント内の値を書き換えやすい

コンポーネント内の要素をDOMで直接書き換えるのではなく、新しい値を用いて再描画することができる
Reactコンポーネントが再描画されるきっかけは、

• stateが変更された時
• propsが変更された時

useStateの使い方

1.useStateによるstateの宣言

const [state, setState] = useState(initialState)

2.stateの更新

setState(newState)

3.具体例

const [isPublished, setIsPublished] = useState(false)
setIsPublished(true)

propsとstateの違い

両者ともに再描画のきっかけになるが

• propsは引数のようにコンポーネントに渡される値 (親コンポーネントから子コンポーネントに渡す)
• stateはコンポーネントの内部で宣言、制御される値

という違いがある

stateをpropsに渡す

const Article = (props) => {
	const [isPublished, setIsPublished] = useState(false)
	const publishArticle = () => {
		setIsPublished(true)
	}
	return (
		<div>
			<PublishButton
			isPublished={isPublished}
			onClick={publishArticle}
			/>
		</div>
	);
};

const PublishButton = (props) => {
	return (
		<button onClick={() => props.onClick()}>
		公開状態:{props.isPublished.toString()}
		</button>
	)
} 

*　 props.onClick()はpublishArticle()
*　 HTMLのbuttonが持つonClickイベントに渡す

ここで注意すること

• 更新関数はそのままpropsとして渡さず、関数化する
• 関数をpropsに渡すときは注意する(後述)

propsへ関数を渡す際の注意点

OKな関数の渡し方

コールバック関数か関数自体を渡す

<PublishButton isPublished={isPublished} onClick={publishArticle} />
<PublishButton isPublished={isPublished} onClick={() => publishArticle()} />

NGな関数の渡し方

<PublishButton isPublished={isPublished} onClick={publishArticle()} />

propsを渡すときに関数を実行すると、無限レンダリングが起きる

最後に

脱初心者として、記事を書いてアウトプットしています。
間違った内容がありましたら、ぜひコメントでご指摘いただけると幸いです。