react hooks 之 useRef, useCallbac

2022-05-01 本文已影响0人 wg689

前言

useRef 可以通过 ref 获取 DOM 节点，其次它还有保存变量的特性。

useRef基础

写法
useRef 的写法为useRef(initialValue)，其会返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

请记住，当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用回调 ref 来实现。
用法
获取 DOM 节点

import { useRef } from 'react'
function App() {
    /* 获取Dom对象 */
    const inputDom = useRef(null);
    /* 点击执行方法 */
    const doInputDom = () => {
        /* 修改.current的值 */
        inputDom.current.value = "已经操作"
        console.log(inputDom)
    }
    return (
        <>
            <input ref={ inputDom } type="text" />
            <button onClick={ doInputDom }>点击设置input的value，同时打印input元素</button>
        </>
    )
}
export default App

useRef进阶

保存变量

useRef() 比 ref 属性更有用。它可以很方便地保存任何可变值，其类似于在 class 中使用实例字段的方式。这是因为它创建的是一个普通 Javascript 对象。而 useRef() 和自建一个 {current: ...} 对象的唯一区别是，useRef 会在每次渲染时返回同一个 ref 对象。

import { useRef, useEffect, useState } from 'react'
function App() {
    /* 定义inputDom来获取第二个input元素，定义textRef来保存text的值 */
    const inputDom = useRef(null);
    const textRef = useRef(null);
    const [ text, setText ] = useState("初始值")
    /* 当text发生了改变，就把text的值给textRef，然后再把textRef.current的值给到inputDom.current.value，再打印出textRef对象 */
    useEffect(()=>{
        textRef.current = text
        inputDom.current.value = textRef.current
        console.log(textRef)
    },[ text ])
    return (
        <>
            {/* 监听输入框的变化，有变化就把最新的值设置给text */}
            <input value={ text } type="text" onChange={ (e)=>{ setText(e.target.value) } } />
            <input ref={ inputDom } type="text" />
        </>
    )
}
export default App

参考
React Hook API索引——useRef