useRef
返回一个可变的 ref 对象,其 .current
属性被初始化为传入的参数(initialValue
)。返回的 ref 对象在组件的整个生命周期内持续存在。
-
命令式地获取及操作DOM:
function TextInputWithFocusButton() { // 通过useRef创建并获取Dom元素 const inputEl = useRef(null); const onButtonClick = () => { // `current` 指向已挂载到 DOM 上的文本输入元素 inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </> ); }
-
useRef 创建一个不受组件刷新而影响的变量
import React, { useRef, useState, useEffect } from "react"; function UseRef() { const [x,setX] = useState(0) //函数组件只要更新了,a就会被重新为 0,所以函数组件需要借助useRef存储变量 let a = 0 //useRef可以生成一个变量,用于在函数组件中存储数据 let currentVal = useRef(0) // 通过useRef创建并获取Dom元素 const inputElement = useRef(null); useEffect(()=>{ console.log(`useEffect --- x:${x} --- currentVal:${currentVal.current} --- a:${a}`); },[x]) return ( <> <p>{x} ----</p> <button onClick={()=>{ setX(v=>v+1) ; currentVal.current+=2 ; a+=2 }}>+1</button> </> ); }
按钮点击+1,页面会打印:
useEffect --- x:1 --- currentVal:2 --- a:0
useEffect --- x:2 --- currentVal:4 --- a:0
useEffect --- x:3 --- currentVal:6 --- a:0
因为a是普通变量,只要按钮点击,就会导致函数组件刷新,重新生成一个新的a,值永远都为0。所以在函数组件内如果想创建一个不受组件刷新而影响的变量,必须借助useRef生成
掘金: juejin.cn/user/303430… 全部原创好文
CSDN: blog.csdn.net/qq_42753705… 全部原创好文
简书:www.jianshu.com/u/460b662a0… 全部原创好文
博客园 :www.cnblogs.com/Jason1995/ 全部原创好文