以前的字符串式refs（this.refs.xxx）已被遗弃，这里整理的都是最新版本的用法

前言：

先说下React refs的主要用途吧，主要用于直接调用某个节点或者组件实例。

我把它的各种用法大致分为了两大类

一类：是没有跨越中间子组件的节点或实例，也就是单个组件内部调用其直接return中包含的React元素，或者是return中包含其他自定义组件。

二类：是跨越了中间子组件的节点或实例，如：父组件调用自定义组件中的某个React元素。

特别说明：ref是不能作用到函数组件上的，但是可以在函数组件中使用ref，因为函数组件没有实例。ref本身返回也是某个节点，或者某个组件的实例。

这样说着似乎有些抽象空洞，下边上张对比图好了

下边具体笔录下这2类具体的用法

一类：不跨越层级的用法

1：常规用法

React.createRef() 和 ref的配合使用

用例：

import * as React from "react";

import * as ReactDOM from "react-dom";

const {Component, createRef} = React;

const myRef= createRef<HTMLDivElement>();

class App extends Component{

  render() {

    return (

      <div ref={myRef}>Hello world</div>

    );

  }

}

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

2：ref回调（个人最爱的一种方式）

这种低版本的React也是支持的，它不同于createRef()，它接受一个函数，以dom元素或者React组件实例作为参数，以使它们能在其他地方被存储和访问。

import * as React from "react";

import * as ReactDOMfrom "react-dom";

const {Component} = React;

class App extends Component{

  myRef;

  componentDidMount() {

    this.myRef&& console.log("=========>>>", this.myRef);

  }

  render() {

    return (

      <div ref={(node) => this.myRef= node}>Hello world</div>

    );

  }

}

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

二类：跨越层级的用法

一种：ref转发

主要通过forwardRef 和 createRef的配合使用

官方并不推荐使用它，下边是官方的建议内容！

当你开始在组件库中使用 forwardRef 时，你应当将其视为一个破坏性更改，并发布库的一个新的主版本。 这是因为你的库可能会有明显不同的行为（例如 refs 被分配给了谁，以及导出了什么类型），并且这样可能会导致依赖旧行为的应用和其他库崩溃。

出于同样的原因，当 React.forwardRef 存在时有条件地使用它也是不推荐的：它改变了你的库的行为，并在升级 React 自身时破坏用户的应用。

用例：

import * as React from "react";

import * as ReactDOM from "react-dom";

const {Component, createRef, forwardRef} = React;

const myRef= createRef<any>();

class App extends Component{

  componentDidMount() {

    myRef&& console.log("=========>>>", myRef);

  }

  render() {

    return (

      <Child ref={myRef}/>

    );

  }

}

const Child= forwardRef((props, ref: any) => (<div ref={ref}>Hello world</div>));

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

在高阶组件中转发 refs 

用例：

二种：将ref的值作为组件的属性往下传递到目标节点或者实例。

1：传递createRef

用例：

import * as React from "react";

import * as ReactDOM from "react-dom";

import {RefObject} from "react";

const {Component, createRef} = React;

const myRef= createRef<HTMLDivElement>();

interface ChildProps {

  refInfo: RefObject<HTMLDivElement>

}

class Child extends Component<ChildProps, {}> {

  render() {

    const {refInfo} = this.props;

    return (

      <div ref={refInfo}>Hello world</div>

    )

}

}

class App extends Component{

  componentDidMount() {

    myRef && console.log("=========>>>", myRef);

  }

  render() {

    return <Child refInfo={myRef}/>

  }

}

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

2：传递ref回调

用例：

import * as React from "react";

import * as ReactDOM from "react-dom";

const {Component} = React;

interface ChildProps {

  refInfo: any

}

function Child(props: ChildProps) {

  return <div ref={(node) => props.refInfo(node)}>Hello world</div>

}

class App extends Component{

  myRef;

  componentDidMount() {

    this.myRef && console.log("=========>>>", this.myRef);

  }

  refInfoHandler = (p) => this.myRef= p;

  render() {

    return (<Child refInfo={this.refInfoHandler}/>)

}

}

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