useRef

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

functionTextInputWithFocusButton(){

    constinputEl=useRef(null);

    constonButtonClick= () => {

           // `current` 指向已挂载到 DOM 上的文本输入元素

            inputEl.current.focus();

       };

       return(

            <> <inputref={inputEl}type="text"/> <buttononClick={onButtonClick}>Focus the input</button> </>

    );

}

是一个普通 Javascript 对象。而 useRef() 和自建一个 {current: ...} 对象的唯一区别是，useRef 会在每次渲染时返回同一个 ref 对象。

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