useRef函数：
{current: 值}
import React, { createRef, useState } from 'react'
export default function App() {
const inpRef = createRef;
const [n, setN] = useState(0);
return (
<div>
<input ref={inpRef} type="text" />
<button onClick={() => {
console.log(inpRef.current.value)
}}>得到input的值</button>
<input type="number"
value={n}
onChange={e => {
setN(e.target.value)
}} />
</div>
)
}
如上代码，一旦我们input出发了onChange方法，导致组件重新渲染，那么每次就会重新创建inpRef，这对我们来说是完全没有必要的呀。我们希望，一个节点，一直使用一个ref。
我么只需要小小改动原来的代码，使用useRef替代createRef即可。
import React, { useRef, useState } from 'react'
export default function App() {
const inpRef = useRef();
const [n, setN] = useState(0);
return (
<div>
<input ref={inpRef} type="text" />
<button onClick={() => {
console.log(inpRef.current.value)
}}>得到input的值</button>
<input type="number"
value={n}
onChange={e => {
setN(e.target.value)
}} />
</div>
)
}
同样的道理，我们每次启动的定时器应该都是同一个，而不是每次生成一个新的再清除。
import React, { useRef, useState, useEffect } from 'react'
export default function App() {
const [n, setN] = useState(10);
const timerRef = useRef();
useEffect(() => {//useEffect中使用setTimeInterval要注意，避免循环重复的问题
if(n === 0){
return;
}
timerRef.current = setTimeout(()=>{
setN(n - 1)
},1000)
return () => {
clearTimeout(timerRef.current);
}
}, [n])
return (
<div>
<h1>{n}</h1>
</div>
)
}
如果我就想用setTimerInterval解决呢？
import React, { useState, useRef, useEffect } from 'react'
export default function App() {
const [n, setN] = useState(10)
const nRef = useRef(n); // {current:10}
useEffect(() => {
const timer = setInterval(() => {
nRef.current--;
setN(nRef.current);
if(nRef.current === 0){
clearInterval(timer);
}
}, 1000)
return () => {
clearInterval(timer);
}
}, [])
return (
<div>
<h1>{n}</h1>
</div>
)
}
博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！