时间戳

首页 > 解决方案 > 我如何使用 React 上下文来准确地获取路由器，并且只在我需要的地方？

reactjs - 我如何使用 React 上下文来准确地获取路由器，并且只在我需要的地方？

问题描述

我已经建立了一个最小的例子来展示这个问题。简而言之，如果我想在组件中使用路由器，例如因为它Route嵌套在其中，那么我需要使用withRouter, 通过该组件的每个祖先来钻取路由器道具，即使这些祖先不使用路由器自己。

我认为它与问题 #6072有关，但它被标记为已修复。我已经阅读了 react-router 中的“处理更新阻塞”文档。

为什么这是必要的？这意味着我需要保守地添加withRouter到每个组件，因为通常我无法预测哪些组件会有需要路由器的后代。我认为 React 中的上下文是为了让我摆脱这种情况，这样我就可以在需要的地方准确地拉出路由器，而在中间的任何地方都忘记它。有没有办法做到这一点？

标签： reactjsreact-routermobxmobx-react

解决方案

我相信你正在打这个：

重要提示：withRouter 不会像 React Redux 的 connect 那样订阅位置更改来进行状态更改。相反，在位置更改从组件传播出去之后重新渲染。这意味着 withRouter 不会在路由转换时重新渲染，除非其父组件重新渲染。如果您使用 withRouter 来防止更新被 shouldComponentUpdate 阻止，那么 withRouter 包装实现 shouldComponentUpdate 的组件很重要。

来自：https ://reacttraining.com/react-router/web/api/withRouter

所以：如果您不将“IgnoreRouter”组件设置为observer. 我在你的密码箱里试过了。

// from this:
let IgnoresRouter = observer(() => (
  <div>
    <h1>IgnoresRouter</h1>
    <UsesRouter />
  </div>
));

// to this:
let IgnoresRouter = () => (
  <div>
    <h1>IgnoresRouter</h1>
    <UsesRouter />
  </div>
);

原因：作为观察者，ignoresRouter 组件没有“依赖”或要观察的值，这意味着：它不会重新渲染。

mobx-react.observer将为您实现 shouldComponentUpdate 。（这就是为什么使用 mobx 更容易获得更好的性能）。但现在它正在和你对抗。

如果您删除观察者，它将重新渲染，因为mobx-react不再控制渲染（shouldComponentUpdate）。因此，参考文档的引用，现在父级 (ignoreRouter) 正在重新渲染，因此子级正在重新渲染withRouter。

现在，由于您使用 mobx，您可能想退后一步，阅读mobx 作者的这篇优秀文章，并可能将 react-router 替换为可以说更好的东西。人们已经根据这些原则构建了路由器：https ://github.com/nareshbhatia/mobx-state-router

我真的无法判断它是否“很棒”，因为我自己没有使用过mobx-state-router，但是我根据相同的原理制作了自己的自定义解决方案，所以最后，它与 mobx-state-router 非常相似，它就像一个魅力。

推荐阅读