React ref 原理及实现

本文实现 React.createRef 以及 React.forwardRef() 方法

React.createRef 的使用

import ReactDOM from "react-dom";
import React from "react";

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.inputRefA = React.createRef();
    this.inputRefB = React.createRef();
    this.inputRefC = React.createRef();
  }
  compute = () => {
    let a = this.inputRefA.current.value;
    let b = this.inputRefB.current.value;
    this.inputRefC.current.value = parseInt(a) + parseInt(b);
  };
  render() {
    return (
      <>
        <input type="text" ref={this.inputRefA} />+
        <input type="text" ref={this.inputRefB} />=
        <input type="text" ref={this.inputRefC} readOnly />
        <button onClick={this.compute}>compute</button>
      </>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById("root"));

实现

createRef 函数实现极为简。只需返回一个对象 {current: null}。原理：创建一个{current: null} 赋值给当前对象的一个变量 this.myRef ，使用方式 this.myRef.current 来获取 dom 对象。

function createRef() {
  return {
    current: null,
  };
}

this.inputRefA = createRef();
this.inputRefB = createRef();
this.inputRefC = createRef();
 // 赋值 this.inputRefA = {current:null}
<input type="text" ref={this.inputRefA} />+
<input type="text" ref={this.inputRefB} />=
<input type="text" ref={this.inputRefC} readOnly />
<button onClick={this.compute}>compute</button>

ref 转发 React.forwardRef() 使用

通过 React.forwardRef 来帮助转发 ref 。

import ReactDOM from "react-dom";
import React from "react";

class Input extends React.Component {
  render() {
    const { myRef } = this.props;
    return <input typr="text" ref={myRef} />;
  }
}

let MyInput = React.forwardRef((props, ref) => {
  return <Input myRef={ref} {...props} />;
});

class A extends React.Component {
  constructor(props) {
    super(props);
    this.MyRef = React.createRef();
  }
  componentDidMount() {
    this.MyRef.current.focus();
  }
  render() {
    return <MyInput ref={this.MyRef} />;
  }
}

ReactDOM.render(<A />, document.getElementById("root"));

实现

//原理
function forwardRef(callback) {
  return function (props) {
    return callback(props, props.ref1);
  };
}

class Input extends React.Component {
  render() {
    const { myRef } = this.props;
    return <input typr="text" ref={myRef} />;
  }
}

//使用
let MyInput = forwardRef((props, ref) => {
  return <Input myRef={ref} {...props} />;
});

class A extends React.Component {
  constructor(props) {
    super(props);
    this.MyRef = React.createRef();
  }
  componentDidMount() {
    this.MyRef.current.focus();
  }
  render() {
    return <MyInput ref1={this.MyRef} />;
  }
}

非受控组件

组件变化不受 React 中 state的控制，全部由 DOM 节点自行控制。