react的refs属性

refs属性的意义是标识，相当于原生js中的id，可以通过this.refs.标识名来访问，获取到的是真实DOM
ref可以为：
string类型（不推荐，可能会出现问题）

回调函数类型：分为行内式和外部callback ref
React 将在组件挂载时，会调用 ref 回调函数并传入 DOM 元素，当卸载时调用它并传入 null。在 componentDidMount 或 componentDidUpdate 触发前，React 会保证 refs 一定是最新的。
如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。

// callback ref
class Demo extends React.Component {
  componentDidMount() {
    this.myRef.focus();
  }

  render() {
    return <input ref={(ele) => {
      this.myRef = ele;
    }} />;
  }

React.createRef：
ref 的值根据节点的类型而有所不同：
当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。
当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性。

class Demo extends React.Component{
            myRef = React.createRef()
            myRef1 = React.createRef()
            showData = ()=>{
                alert(this.myRef.current.value)
            }
            showData1 = ()=>{
                alert(this.myRef1.current.value)
            }

            render(){
                // React.createRef()调用后可返回一个容器，该容器可存储被ref所标识的节点，该容器专人专用
                return(
                    <div>
                        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
                        <button onClick={this.showData}>点我提示左侧数据</button>
                        <input ref={this.myRef1} type="text" onBlur={this.showData1} placeholder="失去焦点提示数据"/>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo a={1} b={2} />,document.getElementById('test'))