Refs

一、The ref callback attribute

ref：reference，父组件引用子组件

 组件并不是真实的 DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟DOM。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做DOM diff ，它可以极大提高网页的性能表现。但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性.

1.1 refs.[refName]

this.refs.[refName] 返回真实的 DOM 节点。需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。

class MyComponent extends React.Component{
        handleClick(event){
            this.refs.myInput.focus();
        }
        render(){
            return (
                <div>
                    <input type="text" ref="myInput" />
                    <button onClick={this.handleClick}>Focus on me</button> 
                </div>
            )
        }
    }
    React.render(<MyComponent/>,document.body)

1.2 ref为函数

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 this.textInput.
    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focus}
        />
      </div>
    );
  }
}

React将在组件mounts时调用ref回调，输入DOM元素；在组件unmount时调用ref回调，输入null。一种常见的模式是利用ref回调来访问DOM元素。如果你现在使用的是this.refs.myrefName来访问ref，建议采用上面这种回调函数的形式。

当ref属性用在一个自定义组件上，ref回调接受这个组件的mounted实例作为参数。比如，如果我们想包裹上面的CustomTextInput组件来模拟他mount后立即被单击

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

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

你可能不会在函数组件上使用ref属性，因为函数组件没有实例，然而你可以在函数组件的render 函数中使用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; }} />
      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );  
}

二、不要滥用refs

当你想使用refs时，想想是否可以用state代替。最适合设置state的地方是在层级中较高的位置设置。