Ref的演变

Ref的作用

在React与vue中都有ref，通常我们在表单类组件是用。具体而言，作用可分两类

• 标记dom，获取dom实例
• 标记子组件，获取子组件实例，从而直接获取到子组件的一切信息(子传父的一种方案)

Ref使用方式的演变

最早期，ref=’string’

//标记dom
import React form 'react';
class C extends React.Component{
  state = {
    a:1
  }
  render(){
    return <div>child</div>
  }
}
export default class extends React.Component{
  componentDidMount(){ 
    // 只有在初始化render之后，才能拿到实例
    console.log(this.refs);
  }
    render(){
      return (
        <div ref='box'>
              <C ref='child'/>
      </div>
    )
  }
}

目前版本仍然可以这样使用，但是会报warning，所以不建议再这么用了，这种使用方式马上会被弃用
注意ref不能标记function组件

中期改版 用callback的方式标记，更安全

import React form 'react';
class C extends React.Component{
  state = {
    a:1
  }
  render(){
    return <div>child</div>
  }
}
export default class extends React.Component{
   componentDidMount(){ 
    // 只有在初始化render之后，才能拿到实例
    console.log(1,this.boxRef);
    console.log(2,this.childRef);
  }
    render(){
      return (
        <div ref={ ref=>this.boxRef = ref } >
              <C ref={ ref=>this.childRef = ref }/>
      </div>
    )
  }
}

目前这种方式还是被大量使用的，也不会报warning

react16.3版本后，我们可以用最新的方式

import React form 'react';
class C extends React.Component{
  state = {
    a:1
  }
  render(){
    return <div>child</div>
  }
}
export default class extends React.Component{
  boxRef = React.createRef()
  childRef = React.createRef()
  componentDidMount(){ 
    // 只有在初始化render之后，才能拿到实例
    console.log(this.boxRef);
    console.log(this.childRef);
  }
    render(){
      return (
        <div ref={ this.boxRef } >
              <C ref={this.childRef }/>
      </div>
    )
  }
}

使用这种方式，是完美的