首先做个对比：
功能一：引用一个值做持久化记忆
场景：清除定时器
import { useRef } from "react"
import { useState } from "react"
// ref:1.引用一个值 做持久化记忆
// let num = useRef(1)
// console.log(num.current++);
// 避免渲染ref的值，其值改变时不会触发更新（区别于state）
const App = () => {
const [count, setCount] = useState(0)
// let timer = null
// const handleClick = () => {
// setCount(count + 1)
// // 不能有效清除定时器，因为每次只能清除当前作用域的timer，但是每次setState都会产生新的作用域，则多次点击会导致定时器累加
// clearInterval(timer)
// timer = setInterval(() => {
// console.log('setInterval...');
// }, 1000);
// }
let timer = useRef(null)
const handleClick = () => {
setCount(count + 1)
// ref具有记忆性，可以拿到第一次产生的timer，然后清除，保证每次只有一个定时器在
clearInterval(timer.current)
timer.current = setInterval(() => {
console.log('setInterval...');
}, 1000);
}
return (<>
hello hook
<button onClick={handleClick}>按钮</button>
<br />
count:{count},
</>)
}
export default App功能二：在react中操作dom(避免原生写法
const App = () => {
const myRef = useRef(null)
const fun = () => {
console.log(myRef.current.innerHTML);
myRef.current.style.color = 'skyblue'
}
const list = [
{ id: 1, text: 'aaa' },
{ id: 2, text: 'bbb' },
{ id: 3, text: 'ccc' }
]
return (
<>
<button onClick={fun}>点击让div变色</button>
<div ref={myRef}>div</div>
{/* 循环中操作ref可以使用回调写法 */}
<ul>
{
list.map((item) => {
return <li key={item.id} ref={(mf) => { mf.style.background = 'pink' }}>{item.text}</li>
})
}
</ul>
</>
)
}
export default App 注意：当给子组件添加ref时，需要对其 forwardRef 转发，用于向父组件公开其dom
const Zi = forwardRef(function myInput(props, refs) {
return <input type="text" ref={refs} />
})
const App = () => {
const myref = useRef(null)
const fn = () => {
myref.current.focus()
myref.current.style.background = 'skyblue'
}
return (<>
hello App
<button onClick={fn}>点击变色</button>
<Zi ref={myref} />
</>)
}
export default App进阶：useImperativeHandle用于为组件自定义暴露方法
import { useRef, forwardRef, useImperativeHandle } from "react"
const Zi = forwardRef(function myInput(props, refs) {
const inputRef = useRef(null)
useImperativeHandle(refs, () => {
return {
myFocus() {
inputRef.current.focus()
},
focusAndStyle() {
inputRef.current.focus()
inputRef.current.style.background = 'red'
}
}
})
return (
<input type="text" ref={inputRef} />
)
})
const App = () => {
const myref = useRef(null)
const fn = () => {
myref.current.myFocus()
myref.current.focusAndStyle()
// 以下会报错 myref.current.focus is not a function，因为只有以上俩方法暴露了
// myref.current.focus()
}
return (<>
hello App
<button onClick={fn}>点击</button>
<Zi ref={myref} />
</>)
}
export default App
