React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操做

---

React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操做

本文做者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson21

转载请注明出处，保留原文连接以及做者信息

在线阅读：http://huziketang.com/books/react

---

在 React.js 当中你基本不须要和 DOM 直接打交道。React.js 提供了一些列的 on* 方法帮助咱们进行事件监听，因此 React.js 当中不须要直接调用 addEventListener 的 DOM API；之前咱们经过手动 DOM 操做进行页面更新（例如借助 jQuery），而在 React.js 当中能够直接经过 setState 的方式从新渲染组件，渲染的时候能够把新的 props 传递给子组件，从而达到页面更新的效果。

React.js 这种从新渲染的机制帮助咱们免除了绝大部分的 DOM 更新操做，也让相似于 jQuery 这种以封装 DOM 操做为主的第三方的库从咱们的开发工具链中删除。

可是 React.js 并不能彻底知足全部 DOM 操做需求，有些时候咱们仍是须要和 DOM 打交道。好比说你想进入页面之后自动 focus 到某个输入框，你须要调用 input.focus() 的 DOM API，好比说你想动态获取某个 DOM 元素的尺寸来作后续的动画，等等。

React.js 当中提供了 ref 属性来帮助咱们获取已经挂载的元素的 DOM 节点，你能够给某个 JSX 元素加上 ref属性：

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 节点传给这个函数。在函数中咱们把这个 DOM 元素设置为组件实例的一个属性，这样之后咱们就能够经过 this.input 获取到这个 DOM 元素。

而后咱们就能够在 componentDidMount 中使用这个 DOM 元素，而且调用 this.input.focus() 的 DOM API。总体就达到了页面加载完成就自动 focus 到输入框的功能（你们能够注意到咱们用上了 componentDidMount 这个组件生命周期）。

咱们能够给任意表明 HTML 元素标签加上 ref 从而获取到它 DOM 元素而后调用 DOM API。可是记住一个原则：能不用 ref 就不用。特别是要避免用 ref 来作 React.js 原本就能够帮助你作到的页面自动更新的操做和事件监听。多余的 DOM 操做实际上是代码里面的“噪音”，不利于咱们理解和维护。

顺带一提的是，其实能够给组件标签也加上 ref ，例如：

<Clock ref={(clock) => this.clock = clock} />

这样你获取到的是这个 Clock 组件在 React.js 内部初始化的实例。但这并非什么经常使用的作法，并且也并不建议这么作，因此这里就简单说起，有兴趣的朋友能够本身学习探索。

下一节中咱们将介绍《React.js 小书 Lesson22 - props.children 和容器类组件》。