Question

为什么每次收到与道具不同的钥匙都会重新安装组件？

每次将不同的值传递给键道具时，它都会重新安装组件。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Box from "./box";

const randomNumber = () => {
  return Math.floor(Math.random() * 100);
};

function App() {
  const [key, setKey] = useState(1);

  return (
    <div>
      <button
        onClick={() => {
          setKey(randomNumber());
        }}
      >
        update key
      </button>
      <h5>key: {key}</h5>
      <Box key={key} id={key} />
    </div>
  );
}

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

https://codesandbox.io/embed/admiring-thompson-rw458

Answer 1

key应该是该节点的稳定标识符。通过更改它，您可以告诉React该节点是新的。这与将其完全替换为另一种类型相同。

如果仍然不清楚，您可能想review the documentation demonstrating their use或阅读有关why they are necessary inside of lists的更多信息。

值得注意的是，您的示例在不需要的地方使用了key。

Answer 2

我看到coreyward已经为您提供了答案。我为您分叉了沙箱，因此您可以看到，如果每次更改数字时，Box组件都不再会挂载和卸载，那么如果您不更改Box上的key属性。

我也建议不要命名您随机计算的“键”的值，因为这会与不应更改的键属性的使用混淆。

https://codesandbox.io/s/practical-dijkstra-d5s5e

<Box id={key} />

代替

<Box key={key} id={key} />

Answer 3

key是reserved property name。 React使用key与其他属性不同；特别是，React将重新安装其key属性已更改的组件。

为什么每次接收不同的密钥时都要重新安装组件？

3 个答案: