React中ref的理解

(1)React的ref有3种用法：

1. 字符串
   dom节点上使用，通过this.refs[refName]来引用真实的dom节点

<input ref="inputRef" /> //this.refs['inputRef']来访问

2. 回调函数
   React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数，它在组件被加载或卸载时会立即执行。

• 当给 HTML 元素添加 ref 属性时，ref 回调接收了底层的 DOM 元素作为参数。
• 当给组件添加 ref 属性时，ref 回调接收当前组件实例作为参数。
• 当组件卸载的时候，会传入null
• ref 回调会在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行。

<input ref={(input) => {this.textInput = input;}} type="text" />   //HTML 元素添加 ref 属性时

<CustomInput ref={(input) => {this.textInput = input;}} />   //组件添加 ref 属性

3. React.createRef()
   在React 16.3版本后，使用此方法来创建ref。将其赋值给一个变量，通过ref挂载在dom节点或组件上，该ref的current属性
   将能拿到dom节点或组件的实例

<