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の適切な設定に関する詳細な説明

推薦する

Vueナンバープレート検索コンポーネントの使い方の詳しい説明

参考までに、シンプルなナンバープレート入力コンポーネント(vue)です。具体的な内容は次のとおりです...

CentOS 6.8 に MySQL 8.0.18 をインストールするチュートリアルの簡単な分析 (RPM 方式)

今日は、CentOS 6.8 サーバーに MySQL 8.0.18 をインストールする方法を記録しま...

MySQL の高可用性アーキテクチャの完全な説明: MHA アーキテクチャ

目次1. はじめに2. 構成3. 作業プロセス4. 建築5. 表示例MHA (Master HA) ...

vue-cli4.5.xはプロジェクトを素早く構築します

1. vue-cliをインストールする vue.js で vue.js を実行します。 2. プロジ...

CSSを使用して、頻繁に表示される奇妙なボタンを簡単に実装します。

背景グループでは、CSS を使用してインセット コーナー ボタンを実装する方法や、矢印付きのボタンを...

Windows (x86、64 ビット) で MySQL 5.7.17 無料インストール バージョンをアップグレードするための詳細なチュートリアル

Laravel 5.4 のデフォルトの utf8mb64 文字エンコーディングをサポートするには、M...

jsはシングルクリックでテーブルを変更することを実装します

Pure jsは、参照用にワンクリックで編集可能なテーブル(トランスクリプトに似たもの)を実装してい...

Tomcat のセッションと Cookie の詳細な説明

序文HTTP はステートレスな通信プロトコルです。各リクエストは互いに独立しており、サーバーは以前の...

HTMLテキストの一般的なイベントとメソッドの詳細な説明

イベントの説明onactivate: オブジェクトがアクティブ要素として設定されたときに発生します。...

jsのイベントループ機構の解析

序文ご存知のとおり、JavaScript は本質的にシングルスレッドですが、ブラウザは非同期リクエス...

Linux でプロセスを効果的に管理するための 8 つのコマンド

序文プロセス管理の役割:サーバーの健全性状態を判定する: プロセスの状態 (メモリ、CPU 占有率な...

MySQL データベース インデックスの面接の質問 (基本的なプログラマー スキル)

目次導入インデックスの原則1. データページ2. ページディレクトリ3. インデックス原則分析要約す...

【Webデザイン】E-WebTemplates の美しい海外の Web ページ テンプレート (FLASH+PSD ソース ファイル+HTML) を共有します

これらはすべて海外のE-WebTemplates WebサイトからのWebページテンプレートであり、...

MySQL 条件付きクエリと使用法および優先順位の例の分析

この記事では、例を使用して、MySQL 条件クエリ and or の使用方法と優先順位を説明します。...

ウェブ開発で遭遇した問題と経験

<br />以下は開発中に遭遇した問題と、そこから得た経験です。デバッグに時間がかかりま...