2

React-Router docs のレッスン 8 で、「インデックス ルート」について説明していますが、次の段落について説明しています。

これは問題なく機能しますが、将来的にはおよびのHomeようなルートに関連付けたいと思うでしょう。いくつかの理由は次のとおりです。AboutRepos

  • 一致したルートとそのコンポーネントに依存するデータ取得の抽象化に参加する。
  • onEnterフックに参加
  • コード分​​割への参加

App また、切り離された状態を維持Homeし、ルート構成で何を子としてレンダリングするかを決定できるようにするのも良い方法です。大きなアプリではなく、小さなアプリの中に小さなアプリを構築したいということを忘れないでください!

残りのドキュメントは問題ありませんでしたが、ここで何を話しているのか理解するのに苦労しています。

Home1-「ルートに接続されている」とはどういう意味ですか?

2-「データフェッチの抽象化」とは何ですか?なぜこれが良いのですか?

3- コード分割とは?

これは、ここでの質問の形式に合っていると思います (客観的に回答可能で、ソフトウェアに関連しています)。前もって感謝します。

4

2 に答える 2

0

  1. すべてのルートはコンポーネントに関連付けられています (その逆ではありません)。/コンポーネントを(ルーターを使用しないデフォルト パス) だけでなく、特定のルートでもレンダリングする必要があることを示しています。

  2. これについてはよくわかりませんが、コンポーネントがルートに基づいてさまざまなデータをロードし、ペイロードを最小限に抑える機能を指していると思います。

  3. webpack のドキュメントから:

大規模な Web アプリの場合、すべてのコードを 1 つのファイルに入れるのは効率的ではありません。特に、一部のコード ブロックが特定の状況でのみ必要になる場合はそうです。Webpack には、コードベースをオンデマンドでロードされる「チャンク」に分割する機能があります。

于 2016-09-02T04:35:15.417 に答える
0

Index ルートが指定されていない場合、アプリのコードは次のようになります。

renderChild() {
  return this.props.children.length ? this.props.children : this.renderMain();
}

renderMain() {
  return <SomeDOM />;
}

render() {
  return (
    <layout>
      <header />
      {this.renderChild()}
      </footer />
    </layout>
  );
}

IndexRoute は onEnter フックを有効にします。onEnter は、認証などに役立ちます。ユーザーが認証されていない場合は、ログイン ページを表示できます。

IndexRoute を使用すると、小道具を介してデータを添付できます。これは、Redux または Flux と統合する場合に役立ちます。以下のコードは、App コンポーネントが一般的な方法で Redux props をすべてのコンポーネントにアタッチする方法を示しています。

{React.cloneElement(this.props.children, { 
  ...this.props, 
  children: this.props.children.props.children 
})}
于 2016-09-02T04:40:42.957 に答える