React获取底层DOM节点ref属性

在React中，有时需要访问底层DOM节点来执行一些命令式操作。

class Focus extends React.Component {
	constructor(props) {
  		super(props)
	    this.handleClick = this.handleClick.bind(this)
	}
	handleClick() {
  		this.element.focus()
	}
	render() {
  		return (
		    <form>
		      <input type="text"
		       ref={element => (this.element = element)}  />
		      <button onClick={this.handleClick}>Focus</button>
		    </form>
		  )
	}
}

我们创建了一个表单，其中包含一个输入元素，并在该元素的ref属性上定义了一个回调函数。

这个回调函数会在组件挂载时被调用，元素参数表示输入的DOM实例。值得注意的是，卸载组件时也会调用这个回调，并传入null参数来释放内存。回调函数要做的就是保存元素对象的引用，方便以后使用（如在handleClick方法触发时使用）。接着我们定义了按钮元素及其事件处理器。在浏览器执行以上代码后就会显示带有输入框和按钮的表单，点击按钮后就会按预期那样聚焦输入框。

一般情况下应该尽量避免使用ref，因为它们让代码更偏向命令式，可读性与可维护性都变差了。