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 をよろしくお願いいたします。