010|React之Ref&DOM

ref是React组件中的一个特殊特性（attribute），它指向一个函数，暂叫ref函数。

当组件mount或unmount时ref函数会被调用，基参数是原始的DOM对象或null。当ref函数用在自定义组件上时，其参数为组件对象的引用。

因此，我们可以使用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).
    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} /> // 使用ref函数获取 input DOM
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focus}
        />
      </div>
    );
  }
}

一个更精练的ref可以如下：

ref={input => this.textInput = input}.

ref函数将会在componentDidMount之前被调用：

class AutoFocusTextInput extends React.Component {
  componentDidMount() {
    this.textInput.focus();
  }

  render() {
    return (
      <CustomTextInput
        ref={(input) => { this.textInput = input; }} />
    );
  }
}

注意：ref函数无法应用于函数式组件上。如：

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

class Parent extends React.Component {
  render() {
    // This will *not* work!
    return (
      <MyFunctionalComponent
        ref={(input) => { this.textInput = input; }} /> // 因MyFunctionalComponent是函数式组件，因此此处ref无效
    );
  }
}

但函数式组件内部是可以使用的:

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

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

  return (
    <div>
      <input
        type="text"
        ref={(input) => { textInput = input; }} /> // ref是否有效取决于标签
      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );  
}

父级为了获取子级原始DOM元素，可以将一个set函数赋值给子级的props属性，子级中再将此props属性赋值为ref函数。实现过程如下：

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

上述代码是一个两级传递，实际上三级传递的实现也是类似，通过props属性一层一层往下传。

React中什么是Uncontrolled Component？

好，这一节就到这里。Ref函数是React中一个非常重要的技巧，希望你掌握了。后续我将介绍更多React技术细节，来慢慢解答上述问题。

想学计算机技术吗？需要1对1专业级导师指导吗？想要团队陪你一起进步吗?欢迎加我为好友！微信号：iTekka。