是什么导致该组件检测到其 props 的变化？

Question

在以下最小示例中，父组件具有data 属性并将data.value 传递给子组件。我很难理解更新策略到底发生了什么：

const MY_DATAVALUE = {
  a: 1,
  b: 2
};

const DATA = {
  value: MY_DATAVALUE
};

function Child(props) {
  useEffect(() => {
    console.log("child props changed");
  }, [props]);

  return <h1>Child</h1>;
}

export default function App() {
  const [data, setData] = useState(DATA);

  useEffect(() => {
    console.log("data changed");
  }, [data]);

  useEffect(() => {
    console.log("data.value changed");
  }, [data.value]);

  function handleButtonClick() {
    const newData = {
      value: MY_DATAVALUE
    };
    setData(newData);
  }

  return (
    <>
      <button onClick={handleButtonClick}>Button</button>
      <Child value={data.value} />
    </>
  );
}

（见Codesandbox） 现在，当单击按钮时，我认为会发生以下情况：

• App 的handleButtonClick() 被执行，data-state 现在指向一个新对象。因此应用的第一个useEffect（检查data）触发。

• 但是data.value 仍然包含相同的引用（对MY_DATAVALUE），因此App 的第二个useEffect（检查data.value）不会触发。

但是：孩子的useEffect（检查props）触发器。这是为什么？根据家长的说法，data.value 没有改变（否则第二个useEffect 会触发）。

你能解释一下，为什么 Childs useEffect 触发器`？我怎样才能知道道具是否“真的”改变了？我是否必须单独检查所有道具键？ 谢谢！

Answer 1

useEffect 如果我们提供的内容不同，则依赖项将触发更改。如果我们使用不同的值传递相同的引用或传递不同的引用，就会发生这种情况。

const newData = {
  value: MY_DATAVALUE
};

setData(newData);

data 现在指的是不同的对象，而value 键指的是与之前的值相同的值。

这意味着，这个钩子会触发：

useEffect(() => {
  console.log("data changed");
}, [data]);

虽然这不会触发：

useEffect(() => {
  console.log("data.value changed");
}, [data.value]);

---

到目前为止，这就是您在这两点中所解释的内容。

对于孩子，props 对象是每次渲染的新引用。

因此，这个钩子总是会触发：

useEffect(() => {
  console.log("child props changed");
}, [props]);

虽然这个钩子不会触发：

const MY_DATAVALUE = {
  a: 1,
  b: 2
};

// In Parent...

<Child value={MY_DATAVALUE} />

// In Child...

useEffect(() => {
  console.log("child value changed");
}, [props.value]);