React の重要な概念

React の重要な概念

1- 反応フック

useReducer を使用して複雑な状態構造を管理したり、useEffect を使用してコンポーネントを外部システムと同期できる React Hook を作成したりできます。パフォーマンスの最適化には useCallback/useMemo、DOM アクセスには useRef、カスタム フックの作成が可能です。

2. 小道具パターンのレンダリング

コンポーネントを再利用しやすくするもう 1 つの方法は、レンダー プロップ パターン を使用することです。レンダー プロップはコンポーネント上のプロップであり、その値は JSX 要素 を返す関数です。コンポーネント自体は、render prop 以外には何もレンダリングしません。代わりに、コンポーネントは独自のレンダリング ロジックを実装する代わりに、単にレンダー プロップを呼び出します。

3. サスペンス

Suspense を使用すると、子の読み込みが完了するまでフォールバックを表示できます。

例 :

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

4. エラー境界

エラー境界 は、コンポーネント ツリーをラップし、コンポーネント内のエラーが広がってアプリケーション全体がクラッシュするのを防ぐ React 固有のコンポーネントです。

これを使用するには、保護したいコンポーネント ツリーをエラー境界コンポーネントでラップするだけです。エラー境界線はエラーを検出し、ラップされたコンポーネント ツリー内でエラーが発生したときにフォールバック UI を表示します。

例 :

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;
  }
}


<ErrorBoundary fallback={<p>Something went wrong</p>}>
  <Profile />
</ErrorBoundary>

5. コンテキストを伴うデータの受け渡し

通常、props を介して親コンポーネントから子コンポーネントに情報を渡します。ただし、途中で多くのコンポーネントを介してプロパティを渡す必要がある場合、またはアプリ内の多くのコンポーネントが同じ情報を必要とする場合、プロパティの受け渡しは冗長で不便になる可能性があります。 Context を使用すると、親コンポーネントは、props を介して明示的に渡すことなく、深さに関係なく、その下のツリー内のコンポーネントで情報を利用できるようになります。

6. 状態管理

状態管理は、動的なユーザー インターフェイスを構築するために世界で最も人気のある JavaScript ライブラリである React の重要な概念です。
Redux を使用してアプリケーションの状態を管理します。

7. コード分割

バンドル は素晴らしいものですが、アプリが成長するにつれてバンドルも成長します。特に大規模なサードパーティ ライブラリを含めている場合はそうです。 バンドルに含めるコードに注意して、誤ってコードを大きくしすぎてアプリの読み込みに長い時間がかかることがないようにする必要があります。

大きなバンドルが必要になることを避けるには、問題を先取りしてバンドルの「分割」を開始することをお勧めします。 コード分割 は、複数のバンドルを作成できる Webpack、Rollup、Browserify (factor-bundle 経由) などのバンドラーによってサポートされる機能です。 実行時で動的にロードできます。

アプリを

コード分割すると、ユーザーが現在必要としているものだけを「遅延読み込み」することができ、アプリのパフォーマンスを劇的に向上させることができます。アプリ内のコード全体の量は減っていませんが、ユーザーが必要としないコードの読み込みを避け、初期読み込み中に必要なコードの量を減らしました。

結論

この記事では、React の高度な概念について書きました。これらの高度な概念により、React アプリケーションのパフォーマンスと保守性が向上します。基本的にこれらの概念を理解して使用することができます

以上がReact の重要な概念の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。