React入門 練習問題 52:コンポーネントの設計原則
Reactのコンポーネントを設計する際の「純粋性(Purity)」の概念に関する説明として、正しいものはどれか。
- 外部の変数を直接書き換えたりせず、同じ入力には常に同じ出力を返すようにする。
- コンポーネント内ではいかなる変数の宣言や代入も行ってはならないというルールである。
- 全てのコンポーネントは状態(State)を持たない静的なものでなければならない。
- ネットワーク通信などの非同期処理をコンポーネント内で直接実行することを推奨する。
- DOMを直接操作して画面を更新することを前提としたコンポーネントの設計手法である。
正解と解説を見る
正解:外部の変数を直接書き換えたりせず、同じ入力には常に同じ出力を返すようにする。
Reactコンポーネントにおける「純粋性(Purity)」とは、関数が外部の状態を変更せず、同じ入力(Props)に対して常に同じ出力(JSX)を返す性質を指します。
【正解の理由】
Reactはコンポーネントを純粋関数として記述することを前提として設計されています。コンポーネントが純粋であることで、レンダリングの結果が予測可能になり、パフォーマンス最適化の仕組み(React.memoなど)が正しく動作します。
【不正解の理由】
• 「コンポーネント内ではいかなる変数の宣言や代入も行ってはならない」という説明は誤り。コンポーネント内部でローカル変数を宣言して使用することは全く問題ありません。
• 「全てのコンポーネントは状態(State)を持たない静的なものでなければならない」という説明は誤り。useState等を使って状態を持つことはReactの基本機能であり、純粋性のルールとは異なります。
• 「ネットワーク通信などの非同期処理をコンポーネント内で直接実行することを推奨する」という説明は誤り。通信などの副作用は、純粋なレンダリング処理の中ではなく、useEffectフックなどの中で実行するべきです。
• 「DOMを直接操作して画面を更新することを前提としたコンポーネントの設計手法である」という説明は誤り。Reactは仮想DOMを用いて画面を更新するため、直接のDOM操作は原則として避けます。