React Apps でのレンダリングと再レンダリングについて: その仕組みと最適化方法

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 を使用している場合は、reselect などのメモ化されたセレクターを使用してアプリケーションをさらに最適化できます。これにより、状態変化の影響を受けないコンポーネントの再レンダリングを回避できます。

Lifecycle Hook-ovi i Rerenderovanje

U klasičnim React klasama, koristili smo shouldComponentUpdate da kontrolišemo kada će se komponenta ponovo renderovati. U funkcionalnim komponentama, ovaj koncept se može simulirati pomoću useEffect i memoizacije.

Zaključak

Renderovanje i rerenderovanje su ključni za prikaz korisničkog interfejsa u React aplikacijama, ali pravilno razumevanje i optimizacija tih procesa može napraviti razliku između spore i super brze aplikacije. Ispravno korišćenje memoizacije, useCallback, useMemo, kao i pažljivo rukovanje Redux-om, pomaže da izbegnemo nepotrebne re-rendere i održimo naše aplikacije brzim i responzivnim.

Primer Koda: Renderovanje i Rerenderovanje u Akciji
Evo primera komponente koja koristi useState, Redux i memoizaciju da optimizuje renderovanje:

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 (
    <div>
      <p>Count: {count}</p>
      <p>Expensive Calculation: {expensiveCalculation}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={() => dispatch({ type: 'SOME_ACTION' })}>
        Dispatch Redux Action
      </button>
    </div>
  );
};

Kao što vidimo, ovde se koristi kombinacija lokalnog state-a, Redux-a, memoizacije i useEffect hook-a da bi aplikacija bila što efikasnija.

以上がReact Apps でのレンダリングと再レンダリングについて: その仕組みと最適化方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。