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

Question

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

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

Answer 1

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

在 中index.js，更改这一行：

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

有了这个：

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

component和renderprops 与匿名函数的区别在于，component={() => <YourComponent />}当父函数重新渲染时，它总是会重新渲染。但是render，使用 时，仅在必要时才会进行重新渲染。

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

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