关于Ref

ref

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素

Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。

当 ref 被传递给 render 中的元素时，对该节点的引用可以在 ref 的 current 属性中被访问。

const node = this.myRef.current;

ref 的值根据节点的类型而有所不同：

• 当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。

• 当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性。

• 你不能在函数组件上使用 ref 属性，因为他们没有实例，但是可以用useRef来获取节点。

  function CustomTextInput(props) {
    // 这里必须声明 textInput，这样 ref 才可以引用它  
    const textInput = useRef(null);
    function handleClick() {
      textInput.current.focus();
    }
  
    return (
      
  
         
        
      
    );
  }
  

使用场景

• 管理焦点，文本选择或媒体播放。
• 触发强制动画。
• 集成第三方 DOM 库。

避免使用 refs 来做任何可以通过声明式实现来完成的事情

尽量不要向父组件暴露子组件DOM refs，这就违背了封装的原则，如果子组件的工作必须依赖于父组件，那为什么不写成一个组件呢。但是官方文档里也没把话说死，因为在极少数的业务情景之下，我们必须干这个事情才能实现某些功能，比如在高阶组件中，我们可以通过ref来获得组件实例，在父组件中去执行属于子组件实例的一些方法。

回调Refs

它能助你更精细地控制何时 refs 被设置和解除。

传递一个函数。这个函数中接受 React 组件实例或 HTML DOM 元素作为参数，以使它们能在其他地方被存储和访问。

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);

    this.textInput = null;
    this.setTextInputRef = element => {      this.textInput = element;    };
    this.focusTextInput = () => {      // 使用原生 DOM API 使 text 输入框获得焦点      
        if (this.textInput) this.textInput.focus();    
    };  
  }

  componentDidMount() {
    // 组件挂载后，让文本框自动获得焦点
    this.focusTextInput();  }

  render() {
    // 使用 `ref` 的回调函数将 text 输入框 DOM 节点的引用存储到 React
    // 实例上（比如 this.textInput）
    return (
      

        
        
      
    );
  }
}

它的执行时机是：

• 组件被挂载后（componentDidMount），回调函数立即执行，回调函数的参数为该组件的实例。
• 组件被卸载（componentDidUnmount）或者原有的 ref 属性本身发生变化的时候，此时回调函数也会立即执行，且回调函数的参数为 null。