React でのポータルとエラー境界処理の実装

React でのポータルとエラー境界処理の実装

ポータル

スロットとも言えますが、Vueのスロットとは異なり、React要素を指定されたコンテナ(実際のDOM)にレンダリングすることを指します。

たとえば、Modal コンポーネントは通常、デフォルトで本体の実際の構造の子要素として直接レンダリングされるため、ReactDOM.createPortal(ReactElement, RealDOM container) を使用して React 要素を作成できます。コード例:

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
'./components/Modal' から Modal をインポートします。

const PortalModal = ReactDOM.createPortal(<Modal />, document.body)

デフォルト関数App()をエクスポートする{
    <div className="app-container"> を返します。
        <ポータルモーダル />
    </div>
}

ブラウザコンソールでは、実際のModalコンポーネントが実際にはbodyの直接の子要素としてレンダリングされていることがわかりますが、React開発者ツールを使用すると、Modalコンポーネントが仮想DOMツリー構造のAppコンポーネントの下にあり、クラス名がapp-containerのdivにあることがわかります。

したがって、React コンポーネントの仮想 DOM ツリー構造は、実際の DOM ツリー構造と一致していない可能性があると結論付けることができます。

したがって、イベントバブリングに注意を払う必要がある

  • Reactのイベントは実際にはパッケージ化されている
  • イベント バブリングは、実際の DOM ツリーのバブリング メカニズムではなく、仮想 DOM ツリーの構造に基づいています。

エラー境界処理

デフォルトでは、レンダリング中にコンポーネントにエラーが発生した場合、コンポーネント ツリー全体がアンマウントされます。エラー境界: レンダリング中に子コンポーネントで発生したエラーをキャプチャし、エラーが親コンポーネントに伝播するのを防ぐ機能を持つコンポーネント。

コンポーネントでエラーをキャッチする (クラス コンポーネント):

サブコンポーネントがエラーをレンダリングしたときにトリガーされる静的メソッドstatic getDerivedStateFromErrorを使用します。

  • 静的メソッドなので、使用できません
  • この関数の戻り値(オブジェクト)は状態をカバーするために状態と混合されます
  • トリガーとなるタイミングは、サブコンポーネントのレンダリング中にエラーが発生した後、ページを更新する前です。
  • 子コンポーネントのレンダリングでエラーが発生した場合にのみトリガーされます (つまり、自身のコンポーネント、兄弟コンポーネント、または親コンポーネントでエラーが発生した場合はトリガーされません)。
React をインポートし、{PureComponent} を 'react' からインポートします。

エクスポートデフォルトクラスErrorBoundaryはPureComponentを拡張します{
    状態 = {
        エラー: false
    }
    静的 getDerivedStateFromError(エラー) {
        console.log('レンダリングエラー: ', error)
        戻る {
            isError: 真
        }
    }
    与える() {
        エラーの場合
            戻る <span>問題が発生しました...</span>
        }
        this.props.children を返す
    }
}

componentDidCatch(error, info)関数の使用

  • インスタンスメソッドです
  • ランタイムは、サブコンポーネントのレンダリングでエラーが発生し、ページが更新された後です (状態を変更すると、アンインストール後にコンポーネント ツリーが再構築されるため、効率が悪くなります)
  • 通常、この関数はエラー情報をバックグラウンドに渡して記録するために使用されます。
React をインポートし、{PureComponent} を 'react' からインポートします。

エクスポートデフォルトクラスErrorBoundaryはPureComponentを拡張します{
    状態 = {
        エラー: false
    }
    コンポーネントDidCatch(エラー、情報) {
        // info はエラーの概要です console.log('レンダリング エラー: ', error)
        console.log('レンダリング情報: ', info)
        this.setState({
            isError: 真
        })
    }
    与える() {
        エラーの場合
            戻る <span>問題が発生しました...</span>
        }
        this.props.children を返す
    }
}

エラー境界を使用しない場合はどうなりますか?

React 16 以降では、エラー境界でキャッチされないエラーが発生すると、React コンポーネント ツリー全体がアンマウントされます。

経験上、バグのある UI を残しておくよりも完全に削除する方がよいことがわかっています。たとえば、Messenger のような製品では、通常とは異なる UI をユーザーに提示すると、ユーザーが他のユーザーに間違ったメッセージを送信してしまう可能性があります。

エラー境界を追加すると、アプリケーションで例外が発生したときに、より優れたユーザー エクスペリエンスを提供できます。たとえば、Facebook Messenger では、サイドバー、メッセージ パネル、チャット履歴、メッセージ入力ボックスが別々のエラー境界で囲まれます。一部の UI コンポーネントがクラッシュしても、残りのコンポーネントは引き続きインタラクティブになります。

注記

一部のエラーはエラー境界コンポーネントによって捕捉されません

独自のコンポーネントのエラー

非同期エラー(setTimeout でスローされたエラーなど)

React をインポートし、{PureComponent} を 'react' からインポートします。

// エラー境界.jsx
エクスポートデフォルトクラスErrorBoundaryはPureComponentを拡張します{
    状態 = {
        エラー: false
    }
    /* この関数は実行されません */
    静的 getDerivedStateFromError(エラー) {
        console.log('レンダリングエラー: ', error)
        戻る {
            isError: 真
        }
    }
    与える() {
        エラーの場合
            戻る <span>問題が発生しました...</span>
        }
        this.props.children を返す
    }
}

// Comp.jsx Compコンポーネントエクスポートデフォルト関数Comp() {
    タイムアウトを設定する(() => {
        新しいエラーをスローします('setTimeout error')
    }, 1000)
    <div>Comp</div> を返す
}

// App.jsx はエクスポートデフォルト関数 App() を使用します {
    戻る <>
        <エラー境界>
            <コンプ />
        </エラー境界>
    </>
}

イベントで発生したエラー

つまり、子コンポーネントのレンダリング中にのみ同期エラーを処理する

React でのポータルとエラー境界処理の実装に関するこの記事はこれで終わりです。React ポータルとエラー境界処理の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 最も単純な ErrorBoundary コンポーネントをカプセル化して、React 例外を処理する
  • Reactエラー境界コンポーネント処理
  • React 16における例外処理の詳細な説明
  • Reactワークフローとエラー境界の実装プロセスの説明

<<:  Docker で hyperf を開発する完全な使用例の詳細な説明

>>:  MySQL sql_modeの適切な設定に関する詳細な説明

推薦する

スパンの最小高さを定義するソリューションは効果がありません

span タグは HTML ウェブページを作成するときによく使用されますが、このタグの使い方がよくわ...

MySQL でタイムゾーンを表示および変更する方法

今日、プログラムが間違った時刻を挿入し、フィールドがデフォルト値 CURRENT_TIMESTAMP...

レスポンシブウェブデザインを実現するためにIEでCSS3メディアクエリをサポートする

今日の画面解像度は、320 ピクセル (iPhone) ほど小さいものから、2560 ピクセル以上 ...

Docker /var/lib/docker/aufs/mnt ディレクトリのクリーニング方法

会社のサービスはdockerを使用しており、ディスクマンが見つかりました。その後、次のコマンドを実行...

仮想マシンの複製に関するVirtual Boxチュートリアル図

VMに慣れた後、BOXに切り替えるのは少し異なります。たとえば、コピーネットワークカードを2枚使って...

VMware Workstation 14 Pro に Win10 システムをインストールする

この記事では、VMware Workstation 14 Proにシステムをインストールする方法を紹...

HTMLチュートリアル、簡単に学べるHTML言語

1. <body background=画像ファイル名 bgcolor=color text=...

Angularフレームワークのビュー抽象定義の詳細な説明

序文「大規模なフロントエンド プロジェクト向け」に設計されたフロントエンド フレームワークである A...

最新の JavaScript で非同期タスクを書く方法

序文この記事では、非同期 JavaScript の進化と、それがコードの記述方法にどのような変化をも...

CentOS 7.x のマスターおよびスレーブ DNS サーバーの展開

1. 準備例: 2 台のマシン: 192.168.219.146 (マスター)、192.168.21...

数千万件のレコードをMySQLに素早く挿入する方法に関する実践的なチュートリアル

1. データベースを作成する 2. テーブルを作成する1. deptテーブルを作成する テーブル「d...

MySql 5.7.17 無料インストール構成チュートリアルの詳細な説明

1. mysql-5.7.17-winx64.zip インストール パッケージをダウンロードします ...

パズル効果を実現するネイティブ js

この記事では、パズル効果を実現するためのネイティブjsの具体的なコードを参考までに共有します。具体的...

CentOS での MySQL ワークベンチのインストールと設定のチュートリアル

この記事では、MySQL Workbenchのインストールと設定のチュートリアルを参考までに紹介しま...