ref属性其实就是为了获取DOM节点，例如：

import React from 'react'class RefComponent extends React.Component {  componentDidMount(){     this.inputNode.focus();  }   render() {     return (       
    
          
     
ref属性
          
      this.inputNode = node}/>       
    
     )   }}export default RefComponent;

利用ref属性返回的回调函数获取DOM节点，从而让页面渲染完成之后，input聚焦，ref除了可以绑定回调函数之外还能绑定字符串，但是在后期react对字符串形式不再维护，这里就不具体说明了，就用回调函数获取DOM。

除了给input聚焦之外，还可以获取当前DOM节点的内容，如下：

import React from 'react'class RefComponent extends React.Component {  componentDidMount(){     this.inputNode.focus();     console.log(this.texthtml);     console.log(this.texthtml.innerHTML);  }   render() {     return (       
    
          
     
ref属性
          
      this.inputNode = node}/>          
     
       this.texthtml = node}>你好
     
       
    
     )   }}export default RefComponent;

输出结果为：

    
     你好
    
你好

在这里，我们也发现一个问题，ref虽然获取DOM节点很方便，但是如果ref用的多了，后期就不好维护了，所以，尽量能少用即少用。

ref除了可以给HTML标签添加，也可以给组件添加，例如：

import React from 'react'import Button from './button.js'class RefComponent extends React.Component {  componentDidMount(){     this.inputNode.focus();     console.log(this.texthtml);     console.log(this.texthtml.innerHTML);     console.log(this.buttonNode);  }   render() {     return (       
    
          
     
ref属性
          
      this.inputNode = node}/>          
     
       this.texthtml = node}>你好
     
          
      this.buttonNode = button}/>       
    
     )   }}export default RefComponent;

但是此时，this.buttonNode得到的是一个Button这个组件实例DOM

这里要注意一个问题，ref只能用在类定义的组件，不能用在函数组件，因为函数组件没有实例，比如以下写法就是错误的：

import React from 'react'function TestComponent() {   return (    
    
     函数组件
    
   );}class RefComponent extends React.Component {  componentDidMount(){     console.log(this.testCom);  }   render() {     return (       
    
          
     
函数组件
          
     
       this.testCom = node}/>       
     
    
     )   }}export default RefComponent;

如果这样写，则会报错，并且this.testCom为undefined，因为此时是获取不到函数组件的实例的，所以以上写法要注意

总结： ref可以给HTML标签，类组件添加，但是不能给函数组件添加