Question

我已经建立了一个minimal example来说明问题。简而言之，如果我想在组件中使用路由器，例如因为它内嵌了Route个嵌套，所以我需要使用withRouter通过该组件的每个祖先来钻取路由器道具，即使这些祖先自己并不使用路由器也是如此。

我认为它与issue #6072有关，但已标记为固定。我已经阅读了react-router中的“处理更新阻止”文档。

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

Answer 1

我相信您正在这样做：

重要说明：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的作者的this excellent article，并可能用可以说更好的东西代替react-router。人们已经根据以下原则构建了路由器：https://github.com/nareshbhatia/mobx-state-router

由于我自己没有使用mobx-state-router，所以我无法真正确定它是否“很棒”，但是我基于相同的原理制定了自己的自定义解决方案，因此最终，它与mobx-状态路由器，它就像一个魅力。

如何使用React上下文仅在我需要的地方准确地获取路由器？

1 个答案: