状態変化時にコンポーネントを再レンダリングする

1. React で状態を維持する
2. React で再レンダリングする

React の人気の主な理由の 1つは、その柔軟性、効率性、および動的な Web アプリケーションを構築するための自由度です。 状態は、React ライブラリの基本的なイノベーションの 1つです。

React で状態を維持する

すべての React コンポーネントは、変更された値を格納する内部状態オブジェクトを持つことができます。 状態値が変更されるたびに、アプリケーションも再レンダリングされます。

当然の疑問は、状態にどのような値を含める必要があるかということです。

州内に保管できるものに制限はありません。 任意のデータ型 (文字列、整数、配列、オブジェクト) にすることができます。

実際には、状態は多くの場合、API から受信したデータと、ユーザーの入力に依存する値 (テーマや認証設定など) を格納するために使用されます。 状態オブジェクトでは、darkMode プロパティを持つことができます。

次に、条件付きスタイルを適用して、Web アプリにダーク モード機能を実装できます。 このプロパティの値が false の場合、アプリの背景は明るく、テキストは暗くなります。 true の場合、暗い背景と白いテキストが表示されます。

React で再レンダリングする

状態値の変更がアプリケーションの再レンダリングをトリガーするため、React はその名に恥じません。 デフォルトでは、状態が変化するたびに、すべてのコンポーネントが再レンダリングされます。

一見すると、このデフォルトの動作は効率が悪いように見えます。 多くの子を持つコンポーネントがあり、状態変数を 1つだけ変更しても、ツリー内のすべてのコンポーネントが再レンダリングされるわけではありません。

最良のシナリオでは、React は更新された値を表示するコンポーネントのみを再レンダリングする必要があります。

問題は、すべての意図と目的のために、それが React の機能です。 Virtual DOM では、1つの状態または prop 値を再レンダリングすると、ツリー内の他のコンポーネントが再レンダリングされます。

ただし、これらの再レンダリングは、Real DOM の影にすぎない Virtual DOM に限定されているため、再レンダリングはあまり多くのリソースを消費しません。

最終段階で、React は Virtual DOM と Real DOM を比較し、Virtual DOM と異なる Real DOM の部分のみを更新します。 このようにして、React はすべての変更が DOM に反映されると同時に、効率を維持します。

React コンポーネントは状態変化時に再レンダリングする

setState() メソッド (または useState() フック) を使用して状態を更新するたびに、React コンポーネントが再レンダリングされます。

実際の例を見てみましょう:

import "./styles.css";
import { useState } from "react";
export default function App() {
  console.log("re-rendered");
  const [text, setText] = useState("");
  return (
    <div className="App">
      <input type="text" onChange={(e) => setText(e.target.value)} />
      <h1>You entered: </h1>
      <p>{text}</p>
    </div>
  );
}

ここでは、1つの <input> 要素、1つの <h1>、および 1つの <p> を持つ単純なアプリケーションがあります。 誰かがテキスト入力に値を入力するたびに更新される 1つの状態変数 text を設定します。

このコードがデプロイされている CodeSandbox のライブ デモ に移動します。 コンソールを開くと、フィールドに何かを入力するたびに、re-rendered というテキストがコンソールに出力されます。

shouldComponentUpdate() メソッド

内部で何が起こっているのか、React がそのコンポーネントを再レンダリングする必要があるとどのように判断するのかを理解するのに役立ちます。

すべてのコンポーネントには、ブール値を返す shouldComponentUpdate() メソッドがあります。 名前が示すように、このメソッドは、コンポーネントを再レンダリングする必要がある場合と再レンダリングしない場合の基準を定義します。

デフォルトでは、基準は次のとおりです。新しい props を受け取るたびに、または状態に変更を加えるたびに、コンポーネントが更新されます。

デフォルトでは、shouldComponent() メソッドには幅広い定義があります。 現在のコンポーネントまたは親コンポーネントが新しい prop 値または state 値の変更を受け取るたびに、true を返します。

これにより、コンポーネントをスキップまたは再レンダリングすることで、重要な変更を表示する際のエラーや遅延を回避できます。

ただし、状態値を操作するための一般的な React ガイドラインに従うことができると確信している場合 (たとえば、その場で変更しない場合)、カスタムの shouldComponentUpdate() 定義を作成できます。