React中的Refs

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

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

通过React.crateRef()创建

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

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之后的版本中该方法已经弃用，建议使用前两种。

转载于:https://juejin.im/post/5d1ad4505188250fcf17b792