如何强制 React（使用钩子的功能组件）在 props 更改时从头开始创建新组件？

Question

总长DR

有没有办法强制 React 从头开始​​重新创建组件（使用钩子的功能组件），而不是在更改时重新渲染它prop？

编辑

关键属性确实有效。我遇到的问题是由于我正在执行的状态更新顺序造成的。第一次更新是立即尝试渲染需要上次更新已完成的组件。

---

我正在开发一个名为 的组件<AddProductWidget>，它将获取props有关产品的以下信息并需要显示其详细信息。它属于一个带有搜索栏的页面，您可以在其中填写产品ID，然后它会从云功能获取产品详细信息。

它的渲染效果是这样的：

  <AddProductWidget
    userImages={props.productDetails.userImages}    // Array of strings (urls)
    title={props.productDetails.title}
    stars={props.productDetails.stars}
  />

AddProductWidget.js

它呈现一个<UserImages>组件，让用户在保存到数据库之前单击一些图像进行选择。因此它需要state“记住”用户点击了哪些图像。

function AddProductWidget(props) {

  const [userImagesSelected, setUserImagesSelected] = useState(
    () => {
      if (props.userImages && props.userImages > 0) {
        return new Array(props.userImages.length).fill(false);
      }
      return null;
    }
  );

  // IT renders the <UserImages> component
  // The code here is simplified

  return(
      <UserImages
        userImages={props.userImages}
        userImagesSelected={userImagesSelected}
        setUserImagesSelected={setUserImagesSelected}
      />
  );

}

该数组的初始状态userImagesSelected应该与数组的长度相同userImages，并填充值，一旦用户开始单击图像，false该状态就会变成。true如果产品没有用户图像，props.userImages将会null并且userImagesSelected也应该是null。

当我加载第一个产品时，一切都按预期工作。无论是否有图像，一切都正确显示。

问题：

问题是，例如，当我加载一个包含 0 个图像的产品，然后加载另一个包含 5 个图像的产品时。基本上propsforAddProductWidget会改变（因为它收到了新产品），但是因为 React 似乎试图使用相同的组件实例，所以我收到一个错误，因为我的UserImages组件将尝试渲染选定的图像信息，但是userImagesSelectedwill的状态仍然是null，因为最后的产品没有图像。

当我使用类时，我可以强制 React 使用该key属性重新创建组件实例，但这似乎不适用于钩子，因为以下代码没有解决我的问题：

  <AddProductWidget
    key={productID}
    userImages={props.productDetails.userImages}    // Array of strings (urls)
    title={props.productDetails.title}
    stars={props.productDetails.stars}
  />

问题

有没有办法强制 React 从头开始​​重新创建组件（使用钩子的功能组件），而不是在更改时重新渲染它prop？

额外的

A 找到了一种解决方法，但看起来有点 hacky，即使它在 React 文档上。它基本上使用状态来检测渲染期间的props更改和调用setState()。我希望更好地从头开始重新创建我的组件。

Hooks 常见问题解答：如何实现 getDerivedStateFromProps

Answer 1

不确定您如何决定不同的key组件不会重新安装该组件，但它应该这样做（您确定密钥已更改吗？）

这是一个运行示例，展示了这一点

function Test() {
  React.useEffect(() => {
    console.log('Test was mounted');
    return () => {
      console.log('Test was un-mounted');
    };
  }, []);

  return "hi there, I'm Test";
}

function App() {
  const [val, setVal] = React.useState("Change me...");
  return (
    <div className="App">
      <input value={val} onChange={e => setVal(e.target.value)} />
      <br />
      <Test key={val} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root" />