useEffect 和依赖数组

Question

我试图了解 React useEffect 如何与对象一起工作。

这是一个有助于演示我的问题的示例：

export function UseEffectHook() {
  const initialState = {
    firstName: "Joe",
    lastName: "Smith",
    address: {
      home: "123 street"
    }
  };
  const [user, setUser] = useState(initialState);
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("triggered");
  }, [user]);

  return (
    <div>
      <p>useEffect - Practice with different deps</p>
      {JSON.stringify(user)}
      <label>Firstname:</label>

      <input
        type="text"
        onChange={e => setUser({ ...user, firstName: e.target.value })}
      />
      <br />
      <label>Lastname:</label>
      <input
        type="text"
        onChange={e => setUser({ ...user, lastName: e.target.value })}
      />
      <button onClick={() => setCount(count + 1)}>Button</button>
   </div>
  );
}

我读过，由于对象在重新渲染之间的比较方式，将对象作为依赖项放在 useEffect 挂钩中不起作用。

我最初的想法是在这个例子中单击按钮并更新计数也应该导致 useEffect 挂钩被更新。情况并非如此，useEffect 不会重新运行。

我无法找到足够人为的示例来帮助演示 useEffect 何时以及为何使用对象重新运行。任何帮助将不胜感激。

Answer 1

每当该对象更改引用时，useEffect 都会使用其依赖项数组中的对象重新运行。

例如，在您的代码中，用户始终保持稳定，直到您调用 setUser，在这种情况下，它将更改为新的引用并在此时运行。

如果您在每次渲染中将 user 定义为新对象，则 useEffect 将在每次组件重新渲染时运行。

  const user = {
    firstName: 'Joe',
    lastName: 'Smith',
    address: {
      home: '123 street',
    },
  };

这都是关于引用相等的。每次渲染时 previousUser===newUser 是否相同。React 本质上对依赖数组中的每个变量执行与（我相信 Object.is）非常相似的检查。