如果 useEffect 侦听非状态值，那么依赖项数组中包含非状态值会产生什么效果？

每一次Comp重新渲染，rand将是不同的值。会不会触发useEffect?

function Comp({}) {
  const rand = Math.random();

  useEffect(() => {
    // do stuff
  }, [rand])
}

任何变量都可以放入依赖数组中，state或不。只要它在数组中并且它发生变化，useEffect的回调被重新执行。

现在怎么办useEffect注意到变化了吗？嗯，每当组件渲染时它都会进行比较。并且只有一个state改变与setState可以触发渲染（这里不讨论渲染，因为父组件渲染）。

如果你已经理解了这个机制，你可以停在这里，然后用 React 构建你令人惊叹的产品:)。否则，请继续阅读。我举了一个例子来解释更多。

假设我们有以下组件。我们本应该Hello Word当组件第一次渲染时和每次都在控制台中记录rand变化。点击那个button变化rand，但我们不会有新的日志，因为没有任何重新渲染，因为没有state已经改变了，所以useEffect没有做差异，所以它不知道变化。

export default function Comp() {
  let rand = Math.random();
  useEffect(() => {
    console.log("Hello Word");
  }, [rand]);
  return (
      <button onClick={() => { rand = Math.random() }}>
        New value
      </button>
  );
}

让我们对这个相同的组件进行一些更改，如下所示。现在，每次单击按钮时，组件都会重新渲染，因为我们正在设置state with setState，并且在重新渲染时如果rand与之前的日志相比发生变化，我们将得到一个新的日志。

export default function Comp() {
  const [state, setState] = useState(true); // new line added
  let rand = Math.random();
  useEffect(() => {
    console.log("Hello Word");
  }, [rand]);
  // notice that the click handler has changed
  return (
      <button onClick={() => setState(!state)}>
        New value
      </button>
  );
}