ref 为字符串

直接写在jsx 的ref 上， 现在官方不再推荐这么写

class Sum extends React.Component{
  add = ()=>{
    let numA = this.refs.numA.value;
    let numB = this.refs.numB.value;
    let result = parseFloat(numA)+parseFloat(numB);
    this.refs.result.value = result;
  }
  render(){
    return (
      <>
       <input ref="numA"/>+<input ref="numB"/><button onClick={this.add}>=</button><input ref="result"/>
      </>
    )
  }
}

ref 为函数

class Sum extends React.Component{
  constructor(props){
    super(props);
  }
  add = ()=>{
    let numA = this.inputA.value;
    let numB = this.inputB.value;
    let result = parseFloat(numA)+parseFloat(numB);
    this.result.value = result;
  }
  render(){
    return (
      <>
       <input ref={(inputA) => this.inputA = inputA}/>+<input ref={(inputB) => this.inputB = inputB}/>
       <button onClick={this.add}>=</button><input ref={(result) => this.result = result}/>
      </>
    )
  }
}

createRef 实现原理

官方推荐这么写

如下所示， 在解析虚拟dom 时，会解析jsx转化的虚拟dom, 当解析到ref时, 会发现 ref 对应的 createRef 是 {current: null} , 然后将真实dom挂载到current属性上

function createRef() {
    return {current: null}
}
class Sum3 extends React.Component{
  constructor(props){
    super(props);
    this.numA = createRef();//{current:numAInput}
    this.numB = createRef();//{current:numBInput}
    this.result = createRef();//{current:resultInput}
    // this.result = React.createRef();
  }
  add = ()=>{
    let numA = this.numA.current.value;
    let numB = this.numB.current.value;
    let result = parseFloat(numA)+parseFloat(numB);
    this.result.current.value = result;
  }
  render(){
    return (
      <>
       <input ref={this.numA}/>+<input ref={this.numB}/>
       <button onClick={this.add}>=</button><input ref={this.result}/>
      </>
    )
  }
}