為什么我這樣設(shè)置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>
這是一個(gè)函數(shù)組件:
<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
后面依賴項(xiàng)數(shù)組如果不寫，就相當(dāng)于添加了所有的依賴項(xiàng)，依賴項(xiàng)為[]，則表示不依賴任何屬性，這樣useEffect就相當(dāng)于只執(zhí)行一次，ref.current是不變的，只有一個(gè)值，因?yàn)橹粓?zhí)行了一次，否則相當(dāng)于多次執(zhí)行useEffect，每次重新執(zhí)行setInterval 都會有一個(gè)新id