2

在React-Router 文档的第 8 课中，讨论“索引路由”，他们描述了以下段落：

这可以正常工作，但我们很可能希望在未来Home连接到类似的About路线Repos。几个原因包括：

  • 参与依赖匹配路由及其组件的数据获取抽象。
  • 参与onEnter钩子
  • 参与代码拆分

此外，保持App 解耦Home并让路由配置决定作为子级渲染的内容感觉很好。请记住，我们想在小应用程序中构建小应用程序，而不是大应用程序！

我对其余的文档很好，但我很难理解他们在这里谈论的内容。

1-“Home附加到路线”是什么意思？

2-什么是“数据提取抽象”，为什么这是一件好事？

3-什么是代码拆分？

我相信这符合这里的问题格式（客观上可以回答，与软件相关）。提前致谢。

4

2 回答 2

0

如果不指定 Index 路由，App 中的代码如下所示：

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 回答
0

  1. 每条路由都与一个组件相关联（而不是相反）。它只是说您可能希望组件不仅在/（不使用任何路由器的默认路径）中呈现，而且在给定路由上呈现。

  2. 我不确定这个，我认为它是指组件根据路由加载不同数据的能力，最小化有效负载。

  3. 从webpack 文档：

对于大型 Web 应用程序，将所有代码放在一个文件中效率不高，尤其是在某些情况下才需要某些代码块时。Webpack 具有将代码库拆分为按需加载的“块”的功能。

于 2016-09-02T04:35:15.417 回答