React中Ref 的使用_05

React中Ref 的使用 React v16.6.3

---

在典型的React数据流中，props是父组件与其子组件交互的惟一方式。要修改子项，请使用new props 从新呈现它。可是，在某些状况下，须要在典型数据流以外强制修改子项。要修改的子项能够是React组件的实例，也能够是DOM元素。对于这两种状况，React都提供了api。

什么时候使用refs

refs有一些很好的用例：

• 1.文本选择或媒体播放。
• 2.触发势在必行的动画。
• 3.与第三方DOM库集成。

避免将refs用于能够声明性地完成的任何操做。

*不要过分使用Refs

---

旧版API：字符串引用

若是您以前使用过React，那么您可能熟悉一个旧的API，其中ref属性是一个字符串"textInput"，而且DOM节点被访问为this.refs.textInput。建议不要使用它，由于字符串引用有一些问题，被认为是遗留问题，极可能会在将来的某个版本中删除。

---

回调引用

当组件安装时，React将使用DOM元素调用ref回调，并在卸载时调用null。
在componentDidMount或componentDidUpdate触发以前，Refs保证是最新的.

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);

    this.textInput = null;

    this.setTextInputRef = element => {
      this.textInput = element;
    };

    this.focusTextInput = () => {
      // Focus the text input using the raw DOM API
      if (this.textInput) this.textInput.focus();
    };
  }

  componentDidMount() {
    // autofocus the input on mount
    this.focusTextInput();
  }

  render() {
    // Use the `ref` callback to store a reference to the text input DOM
    // element in an instance field (for example, this.textInput).
    return (
      <div>
        <input
          type="text"
          ref={this.setTextInputRef}
        />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

refs例子--点击获取input焦点

class Example extends React.Component {
  handleClick() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus
    ();
  }
  render() {
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick.bind(this)}
        />
      </div>
    );
  }
}

---

使用React.createRef()

React.createRef()React 16.3中引入的API。若是您使用的是早期版本的React，咱们建议您使用回调引用。

---

建立React.createRef()

Refs是使用属性建立的，React.createRef()并经过ref属性附加到React元素。在构造组件时，一般将Refs分配给实例属性，以即可以在整个组件中引用它们。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

访问ref

当ref被传递给元素时render，对该节点的引用变得能够在currentref 的属性处访问

const node = this.myRef.current;

ref的值根据节点的类型而有所不一样

• 当在refHTML元素上使用该属性时，ref在构造函数中建立的属性将React.createRef()接收底层DOM元素做为其current属性。
• 在ref自定义类组件上使用该属性时，该ref对象将接收组件的已安装实例做为其current。

您可能没法ref在函数组件上使用该属性，由于它们没有实例。

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />

        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

current当组件安装时，React将为该属性分配DOM元素，并null在卸载时将其分配回。ref更新发生以前componentDidMount或componentDidUpdate生命周期方法。

没法在函数组件上使用ref属性

function MyFunctionComponent() {
  return <input />;
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }
  render() {
    // This will *not* work!
    return (
      <MyFunctionComponent ref={this.textInput} />
    );
  }
}

**若是须要引用它，则应该将组件转换为类，就像您须要生命周期方法或状态时同样。
可是，只要引用DOM元素或类组件，就能够在函数组件中使用该ref属性：**

function CustomTextInput(props) {
  // textInput must be declared here so the ref can refer to it
  let textInput = React.createRef();

  function handleClick() {
    textInput.current.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={textInput} />

      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );
}

将DOM引用公开给父组件

在极少数状况下，可能但愿从父组件访问子节点的DOM节点。一般不建议这样作，由于它会破坏组件封装，但它偶尔可用于触发焦点或测量子DOM节点的大小或位置。

虽然能够向子组件添加引用，但这不是一个理想的解决方案，由于只能得到组件实例而不是DOM节点。此外，这不适用于功能组件。

若是使用React 16.3或更高版本，咱们建议在这些状况下使用ref forwarding。引用转发容许组件选择将任何子组件的引用公开为本身的组件。能够在ref转发文档中找到有关如何将子DOM节点公开给父组件的详细示例。

若是您使用React 16.2或更低版本，或者您须要比ref转发提供的更多灵活性，您可使用此替代方法并明确地将ref做为不一样名称的prop传递。

若是可能，建议不要暴露DOM节点，但它能够是一个有用的逃生舱。请注意，此方法要求向子组件添加一些代码。若是您彻底没法控制子组件实现，则最后一个选项是使用findDOMNode()，但不鼓励使用它StrictMode。