javascript - 如何避免在需要 URI 更新时重新安装组件(例如过滤器按钮)？

Question

使用 react-router v3 & redux 我基本上有一个类似于以下的路由设置:

<Route name="app" path="/" component={App}>
  <IndexRoute component={Catalogue} />
  <Route name="brand" path="/brand/(:brand)" component={Catalogue} />
</Route>

我的目录发出一个异步请求来获取我的所有产品，然后将它们存储在状态中。此外，我的 Catalogue 组件有多个使用 react-router 中的 Link 的 brand 按钮，每个链接都指向类似:

• /brand/brandA
• /brand/brandB
• /brand/brandC

当用户单击品牌过滤器按钮时，目录具有过滤逻辑，并且仅显示属于 brandX 的产品作为 url 参数的一部分。

在 Catalog 组件中，我有如下内容:

componentDidMount() {
  if (this.props.params.brand) {
    // this is a redux action dispatch
    this.props.setBrandFilter(this.props.params.brand);
  }
}

问题: 我现在的问题是，每次用户单击我的目录组件上的品牌过滤器链接时，路由器都会捕获它(好事。)，我的目录组件总是会重新安装(坏事。)并再次获取 ALL 我的产品(可怕的东西!)。获取所有产品后，它会按品牌过滤列表(如果在品牌特定路线上)。

基本上我需要一种方法来更新地址栏中的 URL 以反射(reflect)品牌过滤器更改(即用户导航到/brand/brandA)以进行分析，但我想避免:

• 重新安装相同目录组件
• 再次重新获取所有产品

这是一个性能 killer !有谁知道如何做这样的事情？任何提示或建议将不胜感激!

Answer 1

如果您将它们作为单独的组件放在不同的路线上，那么它们将被重新安装。您明确告诉它这样做。您可以采取一些措施来避免这种情况。

• 不要通过组件装载触发所有数据提取。这对于小规模、琐碎的项目来说还可以，但它很快就会崩溃。 flux架构是专门为此设计的。预先获取(在应用程序加载时)，并将这些产品加载到商店中。

• 如果您的路由表就这么简单，那么 react-router v4 可以简化的一件大事就是嵌套路由来呈现页面的部分内容。 React 完全是关于处理渲染组件，而不是页面，所以我们的路由器是时候摆脱整个“一个完整网页的一个 URL”了。 react router sidebar example 是一个很好的引用。您不仅可以将此示例应用于页眉、侧边栏和页脚。您可以在您的案例中应用它，以便父级 <Catalog>永远不需要重新安装。

  <Route name="app" path="/" component={App}> <Catalog> <Route name="brand" path="/brand/(:brand)" component={BrandList} /> </Catalog> </Route>