React コンポーネントを強制的に更新する方法

概要

この記事では、React.js でコンポーネントを強制的に更新する方法を紹介します。 より具体的には、React の再レンダリングについて簡単に紹介し、クラスベースのコンポーネントで更新を強制する方法と、機能コンポーネントで更新を強制する方法を示します。

React 再レンダリング

ほとんどの場合、React 自体がコンポーネントの再レンダリングを自動的に処理します。 この原因は、小道具または状態がいつ更新されたかに基づいている可能性があります。 そのため、状態またはプロパティが変更されると、コンポーネントが再レンダリングされます。 しかし、コンポーネントが他の何かに依存していて、必ずしも状態やプロパティに依存していない場合はどうでしょうか? その場合、React が変更を検出していない可能性があるため、コンポーネントを強制的に更新する必要がある場合があります。

React コンポーネントでこの強制更新を使用する方法を見てみましょう。 これを示すために、デモ用の簡単なアプリケーションを作成します。

Note: React のいくつかの概念について説明するので、React の基本的な知識があることをお勧めします。

クラスベース コンポーネントの強制更新

クラス コンポーネントには、コンポーネントを再レンダリングするためのメソッドが組み込まれています。 forceUpdate()コンポーネントを強制的に再レン​​ダリングするために使用されます。 について詳しく読むことができます forceUpdate() Reactのメソッド 公式ウェブサイト.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

Note: を使用したコンポーネントの更新に依存することはお勧めできません。 forceUpdate() 方法。 このメソッドが必要な場合は、まずコードを分析して、React がコンポーネントを更新しない別の理由があるかどうかを確認してください。 バグが原因であるか、React が独自にコンポーネントを適切に再レンダリングできるようにコードを再構築できることに気付くかもしれません。

クラスベースのコンポーネントを強制的に更新する方法の例を次に示します。

import React from 'react'

class App extends React.Component {
    constructor() {
        super();
        this.handleForceupdateMethod = this.handleForceupdateMethod.bind(this);
    };

    handleForceupdateMethod() {
        this.forceUpdate();
    };

    render() {
        return (
            <div>
                <h1>Hello StackAbuse</h1>
                <h3>Random Number: { Math.random() }</h3>
                <button onClick={this.handleForceupdateMethod}>
                    Force re-render
                </button>
            </div>
        );
    }
}

export default App

このメソッド内では、見かけよりも多くのことが行われています。 たとえば、 forceUpdate() 子コンポーネントのライフサイクル メソッドもトリガーします。 React でわかっているように、マークアップが実際に変更された場合にのみ DOM を更新します。

ジョブがまだ送信されていなければ、ジョブセットアップのどこからでも ライブコードはこちら.

機能コンポーネントの強制更新

機能コンポーネントには、クラスベースのコンポーネントのようにコンポーネントを再レンダリングするための組み込みメソッドがありません。 これは、私たちが持っていないことを意味します forceUpdate() 当社が利用できる方法。 ただし、React コンポーネントは通常、状態またはプロップの変更により再レンダリングされることを思い出してください。 これを使用して、強制的に更新する方法を実現できます。

v16.8+ の時点で、React にはフックと呼ばれる概念があり、機能コンポーネントで状態の更新や副作用の実行などに使用できます。コンポーネントを再レンダリングする際に、これらのフックを有利に使用します。

機能コンポーネントの更新を強制する方法の例を次に示します。

使い方 useReducer フック

const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

function handleClick() {
    forceUpdate();
}

React のレデューサーは通常、複雑な状態ロジックとアクションがある場合に使用されます。 ここでは、ダミーの状態変数を更新して更新をトリガーするために単純に使用します。 x. 更新をトリガーするには、実際に状態を変更する必要があります。これが、呼び出しごとにインクリメントされる理由です。

useState フック

import React, { useState } from "react";


function useForceUpdate() {
    let [value, setState] = useState(true);
    return () => setState(!value);
}

export default function App() {
    
    const handleForceupdateMethod = useForceUpdate();

    return (
        <div className="App">
            <h1>Hello StackAbuse </h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

このタイプの強制更新の背後にある考え方は、 useReducer つまり、変更を強制するために状態を常に更新しています。 最後のメソッドで行ったようにカウンターをインクリメントする代わりに、ここでは単純にブール値を切り替えて、呼び出しごとに否定されるようにします。

使い方 useState および useCallback フック

import React, { useState , useCallback} from "react";

export default function App() {
    const [, updateState] = useState();
    const handleForceupdateMethod = useCallback(() => updateState({}), []);

    
    console.log("Rendering...");

    return (
        <div className="App">
            <h1>Hello StackAbuse</h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

繰り返しますが、この戦略は状態を変更することによって機能します。 この場合、技術的には変更していませんが、 値 州の、私たち 　 新しいオブジェクトを送信します。これは、状態に対して「深い」等価性チェックを行わないため、React によって新しいと見なされます。

ご覧のとおり、ここで同じことを達成する方法はいくつかあります。 これらはすべて技術的にアンチパターンであり、可能な限り避けるべきであることに注意してください。 ただし、根本的な問題を解決できず、コンポーネントを強制的に更新する必要がある場合は、ここで示した方法のいずれかが機能するはずです。

まとめ

この記事では、React コンポーネントの更新を強制する方法を見てきました。 また、機能コンポーネントとクラスベースのコンポーネントの両方でこれを実現する方法についても説明しました。 必ずしも良い習慣ではありませんが、特別な場合に使用する必要がある場合に備えて、それがどのように機能するかを理解することは役に立ちます。