强制更新 React@16.8.6 中的所有组件答案

【问题标题】：Force update all the components in React@16.8.6强制更新 React@16.8.6 中的所有组件
【发布时间】：2019-11-14 15:36:30
【问题描述】：

我想更新我的 React 应用程序中的所有组件（无论嵌套级别是什么，或者是否有任何 prop 或状态更改）。

我尝试使用this.forceUpdate()，但由于某些组件不使用任何道具或状态，因此它们及其子组件不会更新。另外，我尝试了in the example 提到的解决方案，但这也没有用。

App.js

render() {
    return (
        <div>
            <Routes />
        </div>
    );
}

如您所见，路由不使用任何道具，因此该组件不会重新渲染。因此，Routes 中的任何组件都没有更新。

一种方法是使用商店。由于这只是一个小操作，所以我不想将商店用于这种用例。

【问题讨论】：

出于好奇，为什么需要强制重新渲染整个应用程序？如果某些元素没有 state 或 props，或者它们的 state 或 props 没有改变，那么他们为什么需要重新渲染呢？应该导致路由重新渲染的更改是什么？

标签： reactjs

【解决方案1】：

如果您确实需要在每次渲染时更新组件，您可以使用每次渲染组件时都不同的 key 属性。这将强制 React 卸载组件的前一个实例并安装新的组件，所有状态和道具都被重置。在Route 的情况下，最简单的方法是将 key 分配为当前页面 url：

render() {
    return (
        <div>
            <Routes key={window.location.href} />
        </div>
    );
}

对于其他组件，这有点棘手，因为您需要手动确保密钥每次都不同。

如果您希望更精细地控制组件的更新时间，可以将key 属性挂钩到状态并更改它onClick。

This post 更详细地解释了该方法。

【讨论】：

其实我所有的组件都是底层Route。另外，我不想在刷新时重置状态和道具。我实际上正在更改所有组件正在使用的实用程序中的变量。因此，每当该变量更改时，我需要使用该变量的新值重新渲染视图，保持状态和道具中的所有其他值不变。
还有，上面的方案即使没有路由变化也会改变值吗？
如果您希望组件跟踪它，您似乎需要将该变量保存到状态中。在上述解决方案中，如果路线保持不变，则值不会改变。
以某种方式，您希望更改的变量在更改时不会导致完全重置，我没有看到任何其他选项。