React中的Refs

在典型的React数据流中， props 是父组件和子组件交互的唯一方式，要修改一个子组件，你需要使用新的props来重新渲染它。但是在某些情况下，你需要在典型的数据流之外强制修改子组件、或获取组件的属性值。被修改的子组件可能是一个React组件的实例，也可能是一个DOM元素。

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

通过React.crateRef()创建

Refs 可以使用 React.createRef() 创建，并通过 ref 属性附加到React元素。在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中调用. ref 作为原生 DOM 的属性传入

class Index extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.getInput = this.getInput.bind(this);
  }

  componentDidMount() {
    console.log(this.componentRef.current)
  }

  getInput() {
    console.log(this.inputRef.current.value)
  }

  render() {
    return (
      <div>
        <input ref={this.inputRef}/>
        <button onClick={this.getInput}>getValue</button>
      </div>
    )
  }
}
复制代码

不过此例子并不恰当，在实际运用中能通过状态申明的方式解决，就避免使用 ref 。 ref 作为组件的属性传入

class IndexPage extends React.PureComponent{
  constructor(props) {
    super(props);
    this.componentRef = React.createRef()
  }

  componentDidMount() {
    console.log(this.componentRef.current)
  }
  
  render() {
    return (
      <div>
        <Ref ref={this.componentRef} />
      </div>
    );
  }
}
复制代码

当 ref 传递给render中的元素时，对该节点的引用可以通过生成的 Refs 对象的current属性访问。但current属性的值因节点的类型不同而有所不同。

• 当 ref 作用于html元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其current属性的值。
• 当 ref 作用于class申明的 React 组件时,构造函数中使用 React.createRef() 创建的 ref 接收组件实例作为其current属性的值。
• 函数组件由于没有实例，所以不能给其添加ref属性，系统会警告

  

  React会在组件挂载时，将 DOM 元素或组件的实例传递给current属性，在组件卸载时给current属性值传入 null , ref 会在  componentDidMount  或  componentDidUpdate  生命周期钩子函数触发前更新。

回调函数创建

refs 可以通过回调函数的形式创建，它能助你更精细地控制何时refs被设置和解除。 回调函数接收 DOM 元素或React组件实例作为参数，并将该参数添加到实例属性上，以使它们能在其他地方被存储和访问。回调函数形式创建的 ref ，通过回调函数的参数直接引用不需要通过current。 ref 作为原生 DOM 的属性传入

class Index extends React.Component {
  constructor(props) {
    super(props);
    this.setInputRef = el => {
      this.inputRef = el
    };
    this.getInput = this.getInput.bind(this);
  }
  getInput() {
    console.log(this.inputRef)
  }
  render() {
    return (
      <div>
        <input ref={this.setInputRef} />
        <button onClick={this.getInput}>getValue</button>
      </div>
    )
  }
}
复制代码

ref 作为组件的属性传入

class IndexPage extends React.PureComponent{
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log(this.componentRef)
  }
  
  render() {
    return (
      <div>
        <CallBackRef ref={ el => {this.componentRef = el}} />
      </div>
    );
  }
}
复制代码

当 ref 作为原生 DOM 的属性传入时回调函数的参数即是该 DOM 对象， ref 作为组件的属性传入时，回调函数的参数即是该React组件的实例对象。React将在组件挂载时，会调用 ref 回调函数并传入对象参数。在 componentDidMount 或 componentDidUpdate 触发前，React 会保证 refs 一定是最新的。

字符串创建

当组件插入到 DOM 后， ref 属性添加一个组件的引用于到 this.refs ，通过 this.refs.xxx 获取对节点的引用

class Index extends React.Component {
  constructor(props) {
    super(props);
    this.getInput = this.getInput.bind(this);
  }
  getInput() {
    console.log(this.refs.inputRef)
  }
  render() {
    return (
      <div>
        <input ref="inputRef" />
        <button onClick={this.getInput}>getValue</button>
      </div>
    )
  }
}
复制代码

在React16.3之后的版本中该方法已经弃用，建议使用前两种。