Refs

Refs提供了一种访问DOM节点或在render方法中创建的React元素的方法。

refs是React组件中非常特殊的props，可以附加在任何一个组件上。组件被调用时会新建一个该组件的实例，而refs就会指向这个实例。

在react\lib\ReactBaseClasses.js文件中，可以看出每个组件都存在refs属性。

/**
 * Base class helpers for the updating state of a component.
 */
function ReactComponent(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;
}

在React组件上添加refs

1.使用字符串的方式添加refs
格式：ref='string'

import React, { Component } from 'react';
import './App.css';
import ReactDOM from 'react-dom';

class Children extends Component {
  render() {
    return <div>
      子组件
    </div>
  }
}
class App extends Component {s

  render() {
    return (
      <div className="App">
        {/* 使用字符串方式 */}
        <Children ref='children' />
      </div>
    );
  }

  componentDidMount() {
    console.log(this);
    console.log('*******************************');
    console.log(this.refs.children);
  }
}

输出结果：

在这里插入图片描述

refs 可以是字符串，同样可以是回调函数。

2.使用 回调函数 的方式添加refs
render方法修改如下：

render() {
    return (
      <div className="App">
        {/* 使用字符串方式 */}
        {/* <Children ref='childern' /> */}
        {/* 使用回调函数方式 */}
        <Children ref={ref=>this.childrenRef=ref} />
      </div>
    );
  }

在这里插入图片描述

想要获取当前React组件的实例（引用）可以使用this，获取所拥有子组件的实例（引用）可以使用refs。

在React组件上添加refs，获取到的是组件的实例。而如果在原生的Dom组件上添加refs获取到的事什么呢？接着看

在DOM元素上添加refs

class App extends Component {

  constructor(props){
    super(props);
  }

  render() {
    return (
      <div className="App">
        <input type='text' ref='input'/>
      </div>
    );
  }

  componentDidMount() {
    console.log(this);
    console.log('*******************************');
    console.log(this.refs.input);
  }
}

结果如下：

在这里插入图片描述

使用回调函数同理，获取到的都是DOM节点。

Refs 和函数组件

refs无法应用于函数组件（无状态组件），因为函数组件挂载时只是方法调用，没有新建实例。

如果需要引用它，则应该将组件转换为类，就像您需要生命周期方法或状态时一样。

但是，只要引用DOM元素或类组件，就可以在函数组件中使用ref属性

参考文档

Refs and the DOM
《深入React技术栈》