ref详解

ref --> reference：引用
我们这片文章介绍React中使用ref

使用场景

1. 希望直接使用DOM元素中的某个方法，或者直接使用自定义组件中的某一个方法。
2. ref作用于内置的HTML组件，得到的将是真实的DOM元素。
3. ref作用于类组件，得到的将是类的实例。
4. ref不能作用于函数组件，但是函数组件中可以传递ref。

ref使用有三种方式：字符串(不推荐使用)，对象，函数。
这里字符串的方式不推荐使用，将会被移除。

对象使用：

constructor(props){
	super(props);
	this.text = React.createRef()  （1）
	this.text = { current:null }		（2）
}
上面（1）中生成的text 等同于（2）这个对象，也就是说他们两个是一样的，（1）是react生成的对象，（2）是我们自己写的一个对象。

函数使用

<input  ref={(e)=>{this.text = e }} ></input>
函数调用的时间:
	componentDidMount组件挂载完成之后可以调用该函数。在componentDidMount中可以使用。如果ref的值发生变化（旧的函数被新的函数替代），分别调用旧的函数和新的函数。时间点出现在componentDidUpdate周期中。
	旧的函数被调用的时候传递null。
	新的函数被调用的时候传递对象。

这里我们为了避免重复调用ref函数。我们可以函数写在render外面。
getRef = (e) =>{
	this.text = e;
}
	
<input onClick = {this.getRef}>	
同时组件在卸载的时候也会调用ref函数。	

ref转发

这个一般使用在高阶组件中，用来隔层抓取高阶组件内部的组件，也就是引用组件内部的东西。
使用到的方法：
forwardRef()：这个是一个高阶组件，接收一个组件，返回一个新组件
参数：当传入函数组件的时候，函数组件需要接收两个参数，A（props，ref）

function comp(props，ref){
	return <div ref = {ref}>凡凡测试</div>
}

const  newComp = React.forwardRef(comp)
在newComp组件中不会使用ref，而是将ref传递到Comp组件中
在Comp组件中的第二个参数接收ref，然后将ref绑定到目标html上

类组件转发ref

当我们在类组件中使用的时候就需要使用普通属性将ref传递过去

app.js

import A from './A'
import com from './com'
let Comp = com(A)
export default class App extends Component {
    myRef = React.createRef()
    render() {
        const {refObj, ...data} = this.props
        return (
            <div>
                <Comp  ref = {this.myRef}></Comp>
            </div>
        )
    }
}

高阶组件
export default function WithLog(Comp,str) {
    return class LogWrapper extends React.Component{
        render(){
        	const { refObj, ...data } = this.props;
            return(
                <>
                    <Comp ref={refObj}  {...this.props}/>
                </>
            ) 
        }
    }
    return React.forwardRef((props.ref)=>{
    	return <LogWrapper {...props} refObj={ref} />
    })
}

这里我们就通过两层传递得到了Comp组件的DOM元素，如果我们不进行转发， 直接将ref使用在Comp组件上，这个时候ref指向的是Comp组件，而不是A组件
注意的是在传递的过程中我们不能使用ref = {}，只有到了目标元素的时候才能使用ref = {}

谨慎使用ref

这个是和React哲学理念不符，尽量少使用，它会改变dom对象。最好使用属性和状态进行控制
调用真实dom对象中的方法。或者cavase
某个时候需要调用类组件的方法