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

Question

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

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

App.js

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

如您所见，Route不带任何道具，因此该组件不会重新渲染。结果，Routes中的所有组件都没有更新。

一种方式是使用商店。因为这只是一个小操作，所以我不想在这种用例中使用商店。

Answer 1

如果确实需要在每个渲染上更新组件，则可以使用key道具，该道具每次渲染时都不同。这将迫使React卸载组件的先前实例，并在重置所有状态和道具的情况下安装新实例。对于Route，最简单的方法是将密钥分配为当前页面的网址：

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

使用其他组件会比较棘手，因为您需要手动确保每次使用的密钥都不相同。

如果您想更精确地控制组件的更新时间，可以将key道具挂接到状态并更改为onClick。

This post更详细地说明了该方法。