当超级组件的状态发生变化时，如何防止路由器内部的组件重新渲染?

Question

当我更新父组件的状态时，其中用路由器包装的子组件也会重新渲染，这会将子组件的状态重新启动到其初始值。 即使我不把任何道具传给孩子，也没有任何依赖。

我该如何防止这种情况？ 您可以在此处找到演示。只需切换子组件的状态，然后更改父组件的状态，然后您将看到发生了什么。

Answer 1

有一个简单的解决方案可以解决您的问题！

在index.js中，更改此行：

<Route exact path="/" component={props => <Sub {...props} />} />

有了这个：

<Route exact path="/" render={props => <Sub {...props} />} />

具有匿名函数的component和render道具之间的区别在于，当父级这样做时，component={() => <YourComponent />}将始终重新渲染。但是，对于render，仅在必要时才会进行重新渲染。

如果您想了解有关该主题的更多信息，我建议您阅读本文：https://tylermcginnis.com/react-router-pass-props-to-components/。

我已经在这里分叉了您的CodeSandbox示例以查看差异：https://codesandbox.io/s/goofy-fermat-m01ct