前面的话
某些情况下需要在典型数据流外强制修改子代。要修改的子代可以是 React 组件实例，也可以是 DOM 元素。这时就要用到refs来操作DOM
使用场景
下面是几个适合使用 refs 的情况
1、处理焦点、文本选择或媒体控制
2、触发强制动画
3、集成第三方 DOM 库
如果可以通过声明式实现，则尽量避免使用 refs
[注意]不要在 Dialog 组件上直接暴露 open() 和 close() 方法，最好传递 isOpen 属性
ref
React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数，它在组件被加载或卸载时会立即执行
[注意]在组件mount之后再去获取ref。componentWillMount和第一次render时都获取不到，在componentDidMount才能获取到
【HTML元素】
当给 HTML 元素添加 ref 属性时，ref 回调接收了底层的 DOM 元素作为参数
React 组件在加载时将 DOM 元素传入 ref 的回调函数，在卸载时则会传入 null。ref 回调会在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行。
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.focus = this.focus.bind(this);
}
focus() {
this.textInput.focus();
}
render() {
return (
{ this.textInput = input; }} />
);
}
}
更简短的写法如下
ref={input => this.textInput = input}
【类组件】
当 ref 属性用于使用 class 声明的自定义组件时，ref 的回调接收的是已经加载的 React 实例
class AutoFocusTextInput extends React.Component {
componentDidMount() {
this.textInput.focusTextInput();
}
render() {
return (
{ this.textInput = input; }} />
);
}
}
[注意]这种方法仅对 class 声明的 CustomTextInput 有效
【函数式组件】
不能在函数式组件上使用 ref 属性，因为它们没有实例
【对父组件暴露DOM节点】
在子节点上暴露一个特殊的属性。子节点将会获得一个函数属性，并将其作为 ref 属性附加到 DOM 节点。这允许父代通过中间件将 ref 回调给子代的 DOM 节点
该方法适用于类组件和函数式组件
function CustomTextInput(props) {
return (
);
}
class Parent extends React.Component {
render() {
return (
this.inputElement = el}
/>
);
}
}
在上面的例子中，Parent 将它的 ref 回调作为一个特殊的 inputRef 传递给 CustomTextInput，然后 CustomTextInput 通过 ref 属性将其传递给 。最终，Parent 中的 this.inputElement 将被设置为与 CustomTextInput 中的 元素相对应的 DOM 节点
非受控组件
要编写一个非受控组件，而非为每个状态更新编写事件处理程序，可以使用 ref 从 DOM 获取表单值
[注意]可能通过e.target.value取得DOM值，而不用绑定react
class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.value);
event.preventDefault();
}
render() {
return (
);
}
}
由于非受控组件将真实数据保存在 DOM 中，因此在使用非受控组件时，更容易同时集成React和非React代码
【默认值】
在 React 的生命周期中，表单元素上的 value 属性将会覆盖 DOM 中的值。使用非受控组件时，通常希望 React 可以为其指定初始值，但不再控制后续更新。要解决这个问题，可以指定一个 defaultValue 属性而不是 value
render() {
return (
);
}
同样， 和 支持 defaultChecked，