在React Router旁边使用React Context API - 消费者不必要地重新渲染问题

时间:2018-04-05 22:18:04

标签: javascript reactjs react-router

我在v16.3中使用React的新Context api。我正在尝试在同样使用React Router的React应用程序中设置我自己的Context。我看到一些奇怪的行为,我不清楚我正在目睹什么,以及如何避免它。

我的理解是,使用新的Context API,您可以创建一个上下文,使您可以访问Provider和Consumer组件。 Consumer组件应该采用在Provider的值更改时执行的render prop。

当我在路由器中使用ContextProvider时,此行为按预期工作。在这个沙箱(https://codesandbox.io/s/lp5qj93l5z)中,MyContext.Consumer的渲染道具每次执行时都会记录到控制台。即使您更改路线,它也只会退出一次。这是我所期望的,因为MyContext.Provider的值没有改变。

但是,如果我改变我的代码结构并尝试将MyContext.Provider放在我的路由器周围,MyContext.Consumer的render prop函数会在每次路由更改时执行,即使提供者值没有更改。请参阅此处的示例:https://codesandbox.io/s/km2w2qlxl5

任何人都可以解释这里发生了什么吗?是否期望这种行为,为什么这样做?

0 个答案:

没有答案