React の重要な概念-jsチュートリアル-php.cn

React の重要な概念

Susan Sarandon

リリース： 2024-10-17 06:34:02

オリジナル

489 人が閲覧しました

Important React Concepts

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 経由) などのバンドラーによってサポートされる機能です。 実行時で動的にロードできます。

アプリを

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