React--ref学习

一，什么是ref ？

1.ref是react提供的一种可以直接获取元素 dom对象或者组件实例的方法。

二，ref设置

1.通过在组件或者dom元素上设置ref属性来获取组件实例或者dom对象

2.ref属性的值有两种：回调ref 和使用 React.createRef()创建

<Component ref={ref=>{this.ref=ref}/>

class Component extends React.Component{
	 constructor(props){
		 super(props)
		 this.ref = React.createRef()
		 }
	 render(){
	  return <C ref={this.ref}}/>
	 }}

三，ref使用

1.如果使用回调ref：直接使用this.ref可直接访问到组件实例

2.如果使用React.createRef()：用this.ref.current访问到组件实例

3.对于一个组件实例（对象），我们可以获取组件的this对象和定义在组件上的方法。

四，设置ref的限制

1.可以在html元素设ref，这时可访问到元素的dom对象（等价于使用document.getElementById()），可以使用所有原生dom对象方法

2.可以在class组件上设置ref,可访问到组件实例

3.不可以在函数组件上设置ref,因为函数组件没有实例

4.对于高阶组件HOC,ref不会指向被包裹的组件，而是会指向高阶组价。解决方法使用ref转发。

五，ref转发:React.forwardRef()

1.在组件上使用ref属性是会获取整个组件实例，

2.HOC高阶组件上使用ref获得的是高阶组件实例，获取不到被包裹组件实例。（被redux的connect的组件，直接使用ref，获取不到被包裹的组件实例）。

3.ref转发能让组件的ref返回组件内部特定的子组件或元素实例。

4.React提供了React.forwardRef实现ref转发。

5.React.forwardRef(fn)：接受一个函数fn作为参数,fn的返回值是一个组件，且React.forwardRef(fn)返回值就是该组件。
函数的参数为（props,ref）：props代表组件接收的props,
函数返回一个组件<C forward={ref} {...props}/>:这里我们把ref作为普通的props命名为forward(可以随意命名)传递给组件。

6.在组件内部我们将forward转给需要转发子组件或者元素的ref属性上。

React.forward((props,ref)=>{return </C {...props} forward={ref}>}） //class组件写法
function C(props){
return <div><button ref={props.forward}></button></div>
}