React出现后，提供了state, props，前端开发者无须在直接操作dom。React官方不推荐我们直接访问、操作DOM，但是，还是为我们留了一个后门ref，方便访问操作DOM。因为在某些特定的场景，必须使用ref来访问DOM元素。比如：input的focus,媒体播放器、组件的位置，动画，引入第三dom方库。
创建和获取ref
在reactd的版本历史上，出现了三种创建ref的方式：string ref，callback ref，React.createRef。无论哪种方式，都是为ref属性赋值，ref和key一样，都是关键字，为React内部使用。 另外，值得注意的是，所有的ref获取，最好在组件加载结束之后，否则无法获取值。因为组件加载后，dom才准备好了是吧。
string ref
class Test extends React.Component {
componentDidMount(){
// 获取
console.log(this.refs.first);
// <input value="first">
}
render() {
// 创建
return <input value="first" ref="first" />
}
}
string ref创建的ref的方法在React16.3之后的版本弃用了，并且官方表示，在16.3之前，尽量使用callback ref来创建ref。因为string ref创建的ref带有些问题，具体原因见连接。
callback ref
class Test extends React.Component {
componentDidMount(){
// 获取
console.log(this.second);
// <input value="second">
}
render() {
// 创建
return <input value="second" ref={(input) => {this.second = input }} />
}
}
通过回调函数的方式创建ref,形势上看上去稍微有些繁琐。并且，callback以上面这种内联的方式赋值，在组件发生了更新时，ref都会重新创建。可通过将这个回调函数变成类的方法来避免。
class Test extends React.Component {
componentDidMount(){
// 获取
console.log(this.second);
// <input value="second">
}
createRef = (dom) => {
this.second = dom;
}
render() {
// 创建
return <input value="second" ref={this.createRef} />
}
}
React.createRef
class Test extends React.Component {
constructor(props) {
super(props);
// 创建
this.third = React.createRef();
}
componentDidMount(){
// 获取
console.log(this.third.current);
// <input value="third">
}
render() {
// 赋值
return <input value="third" ref={this.third} />
}
}
React.ref是React16.3后新加的一个创建ref的方法，写法相对于callback ref的写法相对简洁。将创建的ref赋值给不同的子元素，ref的current的值有所区别。
不同子元素的ref值
这里讨论通过callback ref和React.createRef创建的ref，赋值给不同的子元素后，ref的取值的不同。
HTML元素
为HTML元素的ref赋值，获取到的ref的值为这个HTML元素对应的DOM元素。
class Test extends React.Component {
second = React.creteRef()
handleSubmit = () => {
console.log(this.first);
// <input value="first">
console.log(this.second.current);
// <input value="second">
}
render() {
// 创建
return (
<div>
<input value="first" ref={(input) => {this.first = input} } />
<input value="second" ref={this.second} />
<button onClick={this.handleSubmit} >提交</button>
</div>
)
}
}
class类创建的React组件
为class类创建的React组件的ref赋值后，最终获取到的值为这个React组件的实例。
class Test extends React.Component {
second = React.createRef()
handleSubmit = () => {
console.log(this.first);
// Hello {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternalFiber: FiberNode, …}
console.log(this.second.current);
// Hello {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternalFiber: FiberNode, …}
}
render() {
return (
<div>
<Hello ref={(input) => {this.first = input}} />
<Hello ref={this.second} />
<button onClick={this.handleSubmit}>submit</button>
</div>
)
}
}
function创建的React组件
遗憾的是，两种方法均无法为function创建的React组件ref赋值，就算赋值，获取到的最终结果为null。
进阶的ref使用
通过react提供的ref，父组件可以获取到具体的某个子元素，这是基本的用法。以下还将提到一些进阶用法。
React.forwardRef
这里有个问题存在，有没有办法穿过父组件，获取子元素？正好，与React.createRef一起出世的还有一个用于解决这个问题的直接办法React.forwarRef。其实，这个这个问题主要出现在HOC高阶组件上，开发者可以通过React.forwardRef获取WrapperedComponnet，而不是外面的包裹层。
class FancyInput extends React.Component{
render() {
return <input value="fancyInput" />
}
}
const HOCFn = (WrapperedComponent) => {
class Test extends React.Component {
render() {
const { forwardRef, ...rest } = this.props;
return (
<WrapperedComponent ref={forwardRef} {...rest} />
)
}
}
return React.forwardRef((props, ref) => {
return <Test forwardRef={ref} {...props} />
});
}
const HocEdComp = HOCFn(FancyInput);
export default class NewComp extends React.Component {
handleSubmit = () => {
console.log(this.testRef);
// FancyInput
}
render() {
return (
<div>
<HocEdComp ref={(dom) => { this.testRef = dom }} />
<button onClick={this.handleSubmit}>提交</button>
</div>
)
}
};
最终，从上面的例子可知，this.testRef指向的是FancyInput，而非HocEdComp。
获取资源子元素中指定的DOM
父元素可以通过ref机制获取html元素，React组件实例，当然这两者都是作为父元素的子元素存在。在这里我们看到几点局限性：
- 无法获取React组件中的某个dom元素
- 无法获取function创建的组件
在这里，可以使用一些小技巧。看例子：
const First = (props) => {
return <input value="first" ref={props.firstRef} />
}
class Second extends React.Component {
render() {
return <input value="second" ref={this.props.secondRef} />;
}
}
export default class Test extends React.Component {
handleSubmit = () => {
console.log(this.first);
// <input value="first">
console.log(this.second)
// <input value="second">
}
render() {
return (
<div>
<First firstRef={(input) => { this.first = input }} />
<Second secondRef={(input) => { this.second = input }} />
<button onClick={this.handleSubmit}>submit</button>
</div>
)
}
}
这种方法的本质是，将创建的ref作为props传递给React组件，React组件的某个HTML元素的ref接收这个属性，父元素便可获取到子组件中具体的某一个HTML元素的底层DOM。这样做，破坏了组件的封装性，但是有时万不得已只能这么做了。
总结
React提供ref的初衷是给开发者一个可获取实际DOM的工具，目前，我们也可以通过ref获取子组件（React组件），但是，React还是提倡不要过度使用ref,，毕竟有了state,props,我们已经从各种繁杂的DOM操作中解放出来。在工作中，有时候设计到动画，或者媒体播放器，input聚焦时，我会使用以下ref,确实解决了state和props无法解决的问题。
我只是总结可以如何使用ref,并没有细细了解ref的原理，找个机会希望可以一探究竟，又当了一次搬运工。
