原因

React.js 并不能完全滿足所有 DOM 操作需求，有些時(shí)候我們還是需要和 DOM 打交道。比如說(shuō)想動(dòng)態(tài)獲取某個(gè) DOM 元素的尺寸來(lái)做后續(xù)的動(dòng)畫等。

使用方法

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

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

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

可以看到給 input 元素加了一個(gè) ref 屬性，這個(gè)屬性值是一個(gè)函數(shù)。當(dāng) input 元素在頁(yè)面上掛載完成以后，React.js 就會(huì)調(diào)用這個(gè)函數(shù)，并且把這個(gè)掛載以后的 DOM 節(jié)點(diǎn)傳給這個(gè)函數(shù)

使用原則

能不用 ref 就不用