為什么我這樣設置ref.current也是自增的，并不是不變的
import React, { useState, useEffect, useLayoutEffect, useMemo, useCallback, useRef } from "react";
export default function StateFunction() {
const [num, setNum] = useState(1)
/*****useRef的使用 start======***********************/
const ref = useRef()
useEffect(() => {
ref.current = setInterval(() => {
setNum(value => value + 1)
}, 1000);
})
useEffect(() => {
if (num > 10) {
console.log('num>10');
clearInterval(ref.current)
}
console.log('ref =', ref);
}, [num])
/*****useRef的使用 end======***********************/
return (
<div>
這是一個函數組件:
<div>num={num}</div>
</div>
)
}
輸出：
ref = {current: 2}
TestUseRef.js:22 ref = {current: 4}
TestUseRef.js:22 ref = {current: 5}
TestUseRef.js:22 ref = {current: 6}
TestUseRef.js:22 ref = {current: 7}
TestUseRef.js:22 ref = {current: 8}
TestUseRef.js:22 ref = {current: 9}
TestUseRef.js:22 ref = {current: 10}
TestUseRef.js:22 ref = {current: 11}
TestUseRef.js:22 ref = {current: 12}
TestUseRef.js:20 num>10
TestUseRef.js:22 ref = {current: 13}
2022-05-01
后面依賴項數組如果不寫，就相當于添加了所有的依賴項，依賴項為[]，則表示不依賴任何屬性，這樣useEffect就相當于只執行一次，ref.current是不變的，只有一個值，因為只執行了一次，否則相當于多次執行useEffect，每次重新執行setInterval 都會有一個新id