React でアプリケーションを作成するとき、コンポーネントのレンダリングと再レンダリングという用語によく遭遇します。これは一見単純そうに見えますが、useState、Redux などのさまざまな状態管理システム、または useEffect などのライフサイクル フックを挿入すると、事態は面白くなります。アプリケーションを高速かつ効率的にしたい場合は、これらのプロセスを理解することが重要です。

レンダリングとは何ですか?

レンダリングは、React が状態またはプロパティに基づいてユーザー インターフェイス (UI) を画面上にレンダリングするプロセスです。コンポーネントが初めてレンダリングされるとき、それは最初のレンダリングと呼ばれます。

初期レンダリングはどのように機能しますか?

コンポーネントが最初に DOM に「マウント」されると、次のことが起こります:

1.状態の初期化:
useState、props、Redux のいずれを使用する場合でも、コンポーネントの初期状態が作成されます。

2.レンダリング関数:
React は JSX コードをループし、現在の状態に基づいて仮想 DOM を生成します。

3.コンポーネントの現在の状態に応じて仮想 DOM (仮想 DOM) を作成します。

4.比較(差分):
仮想 DOM は実際の DOM と比較されます (最初のレンダリングであるため、すべての要素が完全にレンダリングされます)。

5.表示中:
コンポーネントが画面に表示されます。
コンポーネントがレンダリングされたら、次の課題は再レンダリングです。

再レンダリング: いつ、そしてなぜ?

状態またはプロパティが変更されるたびに再レンダリングが行われます。画面上の数字を変えるボタンをクリックしましたか? Redux ストアの値を変更しましたか?これらすべてのアクションにより、React がコンポーネントを再度レンダリングする可能性があり、そこで再レンダリングが登場します。

再レンダリングはどのように機能しますか?

状態変化検出:

• useState を使用すると、setState を呼び出すと、React はコンポーネントを更新する必要があることを認識します。

• Redux では、ストア内の値が変更されると、状態のその部分に関連付けられたすべてのコンポーネントが再レンダリングされます。

レンダートリガー:

状態が変化すると、React はその変化に基づいて新しい仮想 DOM を作成します。

比較 (差分):

• React は新しい仮想 DOM と古い仮想 DOM を比較し、どの変更を適用するかを計算します。これは React がレンダリングを最適化する方法の 1 つです。

変更の表示:

• 変更が計算された後、React は変更を実際の DOM に適用します。したがって、ページの変更された部分のみが再度表示されます。

どのコンポーネントが再レンダリングされますか?

すべてのコンポーネントがすべての変更の影響を受けるわけではありません。 React は、次のコンポーネントのみを再レンダリングします:

ローカル州を使用:
useState を使用する場合、コンポーネントは setState が呼び出されるたびに再レンダリングされます。

Redux 状態を使用する:
コンポーネントが Redux 状態 (useSelector または connect 経由) に依存している場合、状態のその部分が変化すると再レンダリングされます。

小道具を使用する:
props 値が変更されると、コンポーネントは新しい値で再レンダリングされます。

レンダリングの最適化

もちろん、すべてのコンポーネントを不必要に再レンダリングすることが常に理想的であるとは限りません。アプリケーションを迅速かつ効率的に動作させたい場合は、いくつかの最適化テクニックを次に示します:

1.メモ化コンポーネント
React は、React.memo を介してコンポーネントのメモ化の機能を提供します。コンポーネントが props や状態の変化に依存しない場合は、それを「記憶」できるため、関連する値が変更された場合にのみ再レンダリングされます。

例：

const MemoizedComponent = React.memo(MyComponent);

2.関数と値のメモ化

レンダリングのたびに関数や値を再作成しないようにするには、関数をメモ化するには useCallback を使用し、値をメモ化するには useMemo を使用します。

• useCallback を使用すると、関数をメモ化し、依存関係が変更されるまで関数が再作成されないようにすることができます。

• useMemo は関数の結果をメモ化するため、レンダリングごとに再計算されません。

例：

const increment = useCallback(() => {
  setCount(prevCount => prevCount   1);
}, []);

const expensiveCalculation = useMemo(() => {
  return count * 2;
}, [count]);

3. Redux の最適化

Redux を使用している場合は、再選択などのメモ化されたセレクターを使用してアプリケーションをさらに最適化できます。これにより、状態変化の影響を受けないコンポーネントの再レンダリングを避けることができます。

ライフサイクルフックとレンダリング

従来の React クラスでは、コンポーネントがいつ再レンダリングされるかを制御するために shouldComponentUpdate を使用していました。機能コンポーネントでは、この概念は useEffect とメモ化を使用してシミュレートできます。

結論

レンダリングと再レンダリングは React アプリの UI 表示にとって重要ですが、これらのプロセスを適切に理解して最適化することで、遅いアプリと超高速なアプリの違いが生まれます。メモ化、useCallback、useMemo を正しく使用し、Redux を慎重に処理することは、不必要な再レンダリングを回避し、アプリケーションの高速性と応答性を維持するのに役立ちます。

コード例: 動作中のレンダリングと再レンダリング
以下は、useState、Redux、およびメモ化を使用してレンダリングを最適化するコンポーネントの例です:

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  // Lokalni state
  const [count, setCount] = useState(0);

  // Redux state
  const reduxValue = useSelector(state => state.someValue);
  const dispatch = useDispatch();

  // Memoizacija funkcije kako bi se izbeglo ponovno kreiranje na svakom renderu
  const increment = useCallback(() => {
    setCount(prevCount => prevCount   1);
  }, []);

  // Memoizacija izračunate vrednosti
  const expensiveCalculation = useMemo(() => {
    return count * 2;
  }, [count]);

  // Efekat koji se pokreće samo pri promeni reduxValue
  useEffect(() => {
    console.log("Redux value changed:", reduxValue);
  }, [reduxValue]);

  return (
    

      
Count: {count}
      
Expensive Calculation: {expensiveCalculation}
      Increment
       dispatch({ type: 'SOME_ACTION' })}>
        Dispatch Redux Action
      
    
  );
};

ご覧のとおり、アプリケーションを可能な限り効率的にするために、ローカル状態、Redux、メモ化、useEffect フックの組み合わせがここで使用されています。