快速理解React钩子函数之useRef

主要作用

1.用来获取dom

const inputRef =useRef(initValue);

useRef 返回一个可变的ref对象，它的.cuttent属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内持续存在。

如果你将 ref 对象以

<div ref={myRef} 

形式传入组件，则无论该节点如何改变，React 都会将 ref 对象的 .current 属性设置为相应的 DOM 节点。

官方案例:

functionTextInputWithFocusButton(){const inputEl =useRef(null);constonButtonClick=()=>{// `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();};return(<><input ref={inputEl} type="text"/><button onClick={onButtonClick}>Focus the input</button></>);}

2.保存一些值

• 注意点：变更 .current 属性不会引发组件重新渲染。

functionTestUseRef(){const inputRef =useRef(null);const valueRef =useRef({value:"0000"});//用来储存值return(<div className="test-use-ref">{/* 以下显示一直是0000 ，因为.current属性的变更并不会使组件重新渲染 */}<div className="show-input-value">{valueRef.current.value}</div><input
        ref={inputRef}
        onChange={()=>{
          valueRef.current.value = inputRef.current.value;//存储的值变为 input输入的值}}/></div>);}