(React) 常用hooks之一 useRef用法

React之useRef基本用法

useRef

返回一个可变的ref对象，且只有一个current属性，初始值为传入的参数

返回的ref对象在组件的整个生命周期内保持不变

更新current的值不会重新渲染，只有当useState更新值时才会触发页面渲染

更新useRef是副作用，一般写在useEffect或事件处理里

当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current属性不会引发组件重新渲染。

基本用法

//创建一个存储DOM对象的容器
const demoRef = useRef()
//获取
demoRef.current
<demo ref={demoRef}/>

• useRef可以获取上一次的值，只要state没有更新，就不会触发页面渲染，那么useRef拿到的就会是上一次的值，因为xx.current变化不会触发组件的重新渲染
• 实现父组件获取子组件的属性和方法

const parent = () => {
    const demoRef = useRef()
    const toHandler = () => {
        cosnt value = demoRef.current?.hello()
    }
    
    <child ref={demoRef} />
}
export default parent;

const child = (props,ref) => {
     //使用useImperativeHandle的好处，可以限制子组件对外暴露信息
    useImperativeHandle(ref,() => ({
        hello:() => {
            console.log('hello')
        }
    }))
}
export default forwardRef(child);