重要な反応概念

1-反応フック

usereducer を使用して複雑な状態構造を管理することができます。を使用して、effect を使用して、コンポーネントを外部システムと同期させるフックを反応させることができます。 usecallback / usememo for performance otimization、useref for domアクセス、およびカスタムフックを作成できます。 2。プロップパターンをレンダリングします

コンポーネントを非常に再利用可能にするもう1つの方法は、

レンダーProp Pattern

を使用することです。レンダリングプロップはコンポーネントのプロップであり、値は jsx要素を返す関数です。コンポーネント自体は、レンダリングプロップ以外のレンダリングではありません。代わりに、コンポーネントは、独自のレンダリングロジックを実装する代わりに、レンダリングプロップを単に呼び出すだけです。 3。サスペンス

サスペンス

を使用すると、子供が積み込みが終了するまでフォールバックを表示できます。

例

：

}>

4。エラー境界

}>
  

エラー境界

は、コンポーネントツリーをラップし、そのコンポーネント内のエラーがアプリケーション全体の広がりと原因を防ぐ反応固有のコンポーネントです。

それを使用するには、エラー境界コンポーネントで保護するコンポーネントツリーを単純にラップする必要があります。エラーボーダーは、エラーを検出し、ラップされたコンポーネントツリー内で発生したときにフォールバックUIが表示されます。

例

：

class errorboundary extends React.comPonent { コンストラクター（小道具）{ スーパー（小道具）; this.state = {haserror：false}; } static getDerivedStateFromError（エラー）{ //次のレンダリングにフォールバックUIが表示されるように状態を更新します。 return {haserror：true}; } componentDidCatch（エラー、情報）{ //例「ComponentStack」： // componentthatthrows（アプリによって作成） //エラーボーニング（アプリによって作成） // div（アプリによって作成） //アプリで logerRortomyService（error、info.componentStack）; } 与える（） { if（this.state.haserror）{ //カスタムフォールバックUIをレンダリングできます this.props.fallbackを返します。 } this.props.childrenを返します。 } } 何かがうまくいかなかった

}>
5。コンテキストでデータを渡す

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

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

    return this.props.children;
  }
}


Something went wrong}>
  

props

を介して、親コンポーネントから子コンポーネントに情報を渡します。ただし、パスプロップは、中央の多くのコンポーネントを通過する必要がある場合、またはアプリ内の多くのコンポーネントが同じ情報を必要とする場合、冗長で不便になります。

Context

は、親コンポーネントがその下のツリー内の任意のコンポーネントでいくつかの情報を利用できるようにすることができます。問題ではありません。 6。州管理 状態管理は、反応の重要な概念であり、動的なユーザーインターフェイスを構築するための世界で最も人気のあるJavaScriptライブラリ。 Reduxを使用してアプリケーション状態を管理します。 7。コードの分割

バンドリング

は素晴らしいですが、アプリが成長するにつれて、バンドルも成長します。特に、大きな
サードパーティライブラリ

が含まれている場合。

bundle

に含めているコードに注意する必要があります。そうすることで、誤ってそれを大きくしないように、アプリが

をロードするのにが長い時間をかけます。 大きなバンドルで巻き上げられないようにするには、問題よりも先を進んで bundle を「分割」し始めるのは良いことです。 code-splitting は、

webpack

lollup 、 browseRify code-splitting あなたのアプリは、ユーザーが現在必要としているものだけを「怠load」するのに役立ち、アプリのパフォーマンスを劇的に改善できます。アプリのコード全体の量を減らしていませんが、ユーザーが必要としない可能性のあるロードコードを避け、初期ロードに必要なコードの量を減らしました。 結論 この記事では、React のの高度な概念について書きました。これらの高度な概念は、Reactアプリケーションの

パフォーマンスと保守性を向上させます。基本的にこれらの概念を理解して使用できます