React ref属性

13 min read

在react典型的数据流中，props传递是父子组件交互的唯一方式；通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然，就像react官网所描述的一样，在react典型的数据量之外，某些情况下（例如和第三方的dom库整合，或者某个dom元素focus等）为了修改子组件我们可能需要另一种方式，这就是ref方式。

React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例；需要区分一下，ReactDOM.render()渲染组件时返回的是组件实例；而渲染dom元素时，返回是具体的dom节点。

例如，下面代码:

const domCom = button;

const refDom = ReactDOM.render(domCom，container);

//ConfirmPass的组件内容省略

const refCom = ReactDOM.render(,container);

console.log(refDom);

console.log(refCom);

ref可以挂到任何组件上，可以挂到组件上也可以是dom元素上；

ref属性可以设置为一个回调函数，这也是官方强烈推荐的用法；

这个函数执行的时机为：

组件被挂载后，回调函数被立即执行，回调函数的参数为该组件的具体实例。

组件被卸载或者原有的ref属性本身发生变化时，回调也会被立即执行，此时回调函数参数为null，以确保内存泄露。

React使用useRef()

在React 16.7及以上版本中有介绍。它有助于访问DOM节点或元素，然后我们可以与该DOM节点或元素进行交互，比如聚焦输入元素或访问输入元素值。它返回ref对象，其.current属性初始化为传递的参数。返回的对象在组件的生命周期内保持不变。

语法

const refContainer = useRef(initialValue);

例子

在下面的代码中，useRef是一个函数，它被分配给一个变量inputRef，然后附加到HTML元素中要引用的一个名为ref的属性。

function useRefExample() {  
  const inputRef= useRef(null);  
  const onButtonClick = () => {  
    inputRef.current.focus();  
  };  
  return (  
    <>  
      <input ref={inputRef} type="text" />  
      <button onClick={onButtonClick}>提交</button>  
    </>  
  );  
}