每次Comp次重新渲染时，rand将是不同的值.它会触发useEffect吗？
function Comp({}) {
const rand = Math.random();
useEffect(() => {
// do stuff
}, [rand])
}
每次Comp次重新渲染时，rand将是不同的值.它会触发useEffect吗？
function Comp({}) {
const rand = Math.random();
useEffect(() => {
// do stuff
}, [rand])
}
在依赖项的数组中有一个变量与它是一个state集和一些setState集这一事实无关.只要它在数组中并且发生变化，useEffect的回调就会再次被调用.现在，useEffect如何注意到这种变化？每当组件重新渲染时，它都会进行diff.Inside a component，只有带有setState的state集才能重新渲染该组件.
如果您已经了解了这一机制，您可以到此为止，然后使用React()来构建您的惊人产品.否则，请继续阅读.我编了一个例子来解释更多.
假设我们有以下组件.当组件第一次渲染时，我们应该在控制台中记录Hello Word个，每次rand个更改.单击button更改rand，但我们不会有新的日志(log)，因为没有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设置为setState，并且在重新渲染时，如果rand的值与前一个值不同，我们将获得一个新的日志(log).
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>
);
}