ref的三种使用方式与forwardRef
一、ref的三种使用方式
源码前言
function Component (props, context,updater)
Component.prototype.setState = function(partialState,callback) {
…
this.updater.enqueueSetState(this,partialState,callback,)
}
updater.enqueueSetState是在reactDOM里实现的。
Component 核心是一样的，
更新的流程不同
类的继承中初始化定义函数的时候，在他的原型上还可以使用传递进来的参数吗？源码上是可以的，回家试一试。
React中ref的三种使用方式：
应用：1.this.refs.stringRef.textContent="string ref got"2.this.methodRef.textContent="method ref got"3.//先创建一个ref对象exportdefaultclassCompextendsReact.Component{super();this.objRef=React.createRef();}//this.objRef.current.textContent="obj ref got"<p ref={this.objRef}>asdf</p>
//string ref 想要获取的那个节点的props上面使用ref属性传入一个字符串，
react在完成这个节点的渲染之后，会在this.ref上面挂载string对应的key
也就是stringRef（如果是DOM节点就会对应DOM的实例，如果是子组件就对应组件的实例classComponent）
>但是如果是function Component呢，正常来说是会失败的，因为function Component是
>没有实例的，那怎么解决呢，后面的forward-ref(让我们在function Component使用ref也不会出错)
<p ref="string">asdf</p>下一个大版本(React17)会废弃,ref会传入一个字符串，然后
//function 参数ele是节点对应的实例，DOM节点的实例，或者组件的实例
<p ref={ele=>(this.methodRef=ele)}></p>
//React提供给我们的一个API：首先在class Component中使用
this.objRef = React.createRef() 创建一个对象相当于//{current:null }
<p ref = {this.objRef}>asdf</p>
//然后把创建的对象（通过ref={}形式）传给某一个节点，就会把某个对象
的实例挂载到，current这个属性上面。
二、forwardRef
假设：当时纯函数组件的时候，没有实例对象，就不能使用获得对应的实例对象,follow meimportReact,{Component}from'react'cosntTargetComponent=(props)=>{<input type="text"/>}exportdefaultclassCompextendsComponent{constructor(){super();this.ref=React.createRef();//创建一个对象 { current : null }}componentDidMount(){this.ref.current.value="ref get input"}render(){return<TargetComponent ref={this.ref}/>}}
importReactfrom'react'constTargetComponent=React.forwardRef(()=>(<input type="text"ref={ref}/>))exportdefaultclassCompextendsReact.Component{constructor(){super();this.ref=React.createRef();}componentDidMount(){this.ref.current.value="ref get input"}render(){return<TargetComponent ref={this.ref}/>}}
