13-Refs and the DOM

Refs and the DOM

在典型的React数据流中，props是父级组件与子组件交互的唯一方式。为了修改一个子组件需要用新的props来渲染。然而，存在一些情况需要--脱离典型数据流的方式去修改子组件。子组件可以作为一个React组件或DOM元素来修改。

When to Use Refs

这里有几种使用refs的情况

• 管理焦点、文本选择、多媒体播放
• 触发指令动画
• 和第三方DOM库交互

给DOM元素增加一个ref属性

React支持一个特殊的属性，这个属性可以添加在任何组件中。ref属性指向了一个callback function(回调函数)，这个回调函数会在组件加载或卸载后立即执行

当ref属性被用于HTML元素时，ref指向的回调函数接收当前DOM元素作为参数。例如，下面的代码使用ref回调函数去存储一个DOM节点的引用

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }

  focus() {
    // Explicitly focus the text input using the raw DOM API
    this.textInput.focus();
  }

  render() {
    // Use the `ref` callback to store a reference to the text input DOM
    // element in an instance field (for example, this.textInput).
    // 注意：ref中的参数input指的是<input type="text"...这个dom元素，参数input只是个参数名，可以换其他参数名
    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focus}
        />
      </div>
    );
  }
}

React会在组件装载时调用回调函数以DOM元素作为参数，当被卸载时调用回调函数并将null作为参数

在Class组件中添加ref

当ref属性被用于自定义类组件时，这个ref回调函数 接受一个已经加载的组件实例作为参数 。

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }

  focus() {
    // Explicitly focus the text input using the raw DOM API
    this.textInput.focus();
  }

  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={(input) => { this.textInput = input; }} />
      </div>
    );
  }
}
class AutoFocusTextInput extends React.Component {
  componentDidMount() {
    // 这里的focus方法实际上是CustomTextInput组件实例的focus方法
    this.textInput.focus();
  }
  // 这里的ref中的参数input指的是已经加载完毕的CustomTextInput组件实例，然后将this.textInput指向该实例
  render() {
    return (
      <CustomTextInput
        ref={(input) => { this.textInput = input; }} />
    );
  }
}

Refs和函数式组件

• 不能在函数式组件中使用ref属性，因为函数式组件没有实例

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

class Parent extends React.Component {
  render() {
    // This will *not* work!
    // 由于函数式组件没有实例，因此ref中的参数input其实不是一个组件实例，因此无法通过这种方式获得组件实例的引用
    return (
      <MyFunctionalComponent
        ref={(input) => { this.textInput = input; }} />
    );
  }
}

• 如果引用了DOM元素或者类组件，也是可以在函数式组件中使用ref属性的

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

  function handleClick() {
    textInput.focus();
  }
  // 这里ref中的input参数指的就是该<input type="text".....元素
  return (
    <div>
      <input
        type="text"
        ref={(input) => { textInput = input; }} />
      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );  
}