当依赖关系更改时，不会调用useEffect

Question

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [minus, setMinus] = useState(3);
const ref = useRef(null);
const handleClick = () => {
setMinus(minus - 1);
};
console.log(
"--> ref and state",
ref.current?.innerHTML ?? ref.current,
minus
);
// first useEffect
useEffect(() => {
console.log(`denp[ref.current] >`, ref.current?.innerHTML ?? ref.current);
}, [ref.current]);
// second useEffect
useEffect(() => {
console.log(`denp[minus]>`, ref.current?.innerHTML ?? ref.current);
}, [minus]);
return (
<div className="App">
{(minus >= 0 || minus <= -5) && <h1 ref={ref}>num: {minus}</h1>}
<button onClick={handleClick}>minus</button>
</div>
);
}
export default App;

在第一次渲染时：运行第一个useEffect并注销：denp[ref.current]>数量：3

我按下按钮，状态minus更新为2，组件重新呈现

在第二次渲染时：运行第一个useEffect并注销：denp[ref.current]>数量：2

我按下按钮，状态minus更新为1，组件重新呈现

在第三次渲染中：第一次useEffect不再运行

为什么第一个useEffect不在第三个渲染中运行？

此处的实时代码：https://codesandbox.io/s/brave-mayer-3f8zsl

Answer 1

如果您真的想使用ref作为依赖项，请使用ref.current.innerHTML而不是ref.current。我用ref.current.innerHTML测试了它，它对我有效希望能帮助你

Answer 2

我想你不应该依赖ref作为依赖项，因为它不会像这里所说的那样触发更新。

Answer 3

如果您正在使用Next.JS(可能适用于任何SSR(，我建议也将依赖关系设置为ref.current？。innerHTML，然后它就会工作。