エラー境界の紹介
一部のUIにおけるJavaScriptエラーはアプリケーション全体を破壊するべきではない.この問題を解決するために、React 16は「エラー境界」の新しい概念を導入した.エラー境界はReactコンポーネントであり、サブアセンブリツリーのどの位置においてもJavaScriptエラーをキャプチャし、これらのエラーを記録し、コンポーネントツリー全体を崩壊させる代わりに予備UIを表示することができる.エラー境界(Errer Boundaries)は、レンダリング、ライフサイクル法、およびコンポーネントツリー全体の下の構造関数においてエラーを捕捉する.
注:エラー境界は以下のような状況をキャプチャできません.

事件の処理(もっと知る)

非同期コード(例えば、setTimeoutまたはrequestAnimationFrameコールバック関数)

サービス端末レンダリング

エラー境界自体から投げられたエラー(そのサブアセンブリではなく)の場合、1つのクラスのコンポーネントがcomponentDidCatchという名前を定義している場合:新しいライフサイクルの方法は、エラー境界となります.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
Something went wrong.
;
    }
    return this.props.children;
  }
}

その後、普通のコンポーネントのように使用できます.

component DidCatch()メソッド機構はJavaScript catch{}に似ていますが、コンポーネントに対しては.クラス構成要素のみがエラー境界になります.実際には、ほとんどの時間はエラー境界コンポーネントを定義したいだけで、あなたのアプリケーション全体で使用します.エラー境界(Errer Boundaries)は、そのサブコンポーネントのエラーのみをキャプチャすることができます.エラー境界は自身のエラーをキャプチャできませんでした.エラー境界がエラー情報をレンダリングできないと、エラーが一番近いエラー境界に上に泡が発生します.これはJavaScriptのcatch{}の働きの仕組みにも似ています.
エラー境界はどうやって配置しますか?
エラー境界の強さはあなたの応用に完全に依存します.一番上のルートコンポーネントに包装して、ユーザーに「異常が発生しました.」エラー情報は、サービスエンドのフレームワークのように通常処理されて崩壊します.個々のプラグインをエラー境界内に包装して、アプリケーションをコンポーネントの崩壊の影響を受けないように保護してもいいです.実際には、ほとんどの時間はエラー境界コンポーネントを定義したいだけで、あなたのアプリケーション全体で使用します.
エラーを捕まえていない新しい行動
この変更は非常に重要な意味があります.React 16からエラー境界に捕捉されていないエラーは、Reactコンポーネントツリー全体をアンマウントします.
なぜtry/catchを使わないですか?
try/catchは非常に素晴らしいですが、コマンドコードでのみ使用できます.イベントプロセッサ内部でエラーをキャプチャする必要があれば、通常のJavaScript try/catch文を使います.