使用Ref进行DOM操作

原因

React.js 并不能完全满足所有 DOM 操作需求，有些时候我们还是需要和 DOM 打交道。比如说想动态获取某个 DOM 元素的尺寸来做后续的动画等。

使用方法

  class AutoFocusInput extends Component {
    componentDidMount () {
      this.input.focus()
    }

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

  ReactDOM.render(
    <AutoFocusInput />,
    document.getElementById('root')
  )

可以看到给 input 元素加了一个 ref 属性，这个属性值是一个函数。当 input 元素在页面上挂载完成以后，React.js 就会调用这个函数，并且把这个挂载以后的 DOM 节点传给这个函数

使用原则

能不用 ref 就不用