2020-07-21源码解析第二节

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"

asdf

//string ref    想要获取的那个节点的props上面使用ref属性传入一个字符串，

react在完成这个节点的渲染之后，会在this.ref上面挂载string对应的key

也就是stringRef（如果是DOM节点就会对应DOM的实例，如果是子组件就对应组件的实例classComponent）

>但是如果是function Component呢，正常来说是会失败的，因为function Component是

>没有实例的，那怎么解决呢，后面的forward-ref(让我们在function Component使用ref也不会出错)

asdf

下一个大版本(React17)会废弃,ref会传入一个字符串，然后

//function    参数ele是节点对应的实例，DOM节点的实例，或者组件的实例

(this.methodRef=ele)}>

//React提供给我们的一个API：首先在class Component中使用

this.objRef = React.createRef() 创建一个对象相当于//{current:null }

asdf

//然后把创建的对象（通过ref={}形式）传给某一个节点，就会把某个对象

的实例挂载到，current这个属性上面。

---

二、forwardRef

假设：当时纯函数组件的时候，没有实例对象，就不能使用获得对应的实例对象,follow meimportReact,{Component}from'react'cosntTargetComponent=(props)=>{}exportdefaultclassCompextendsComponent{constructor(){super();this.ref=React.createRef();//创建一个对象  { current : null }}componentDidMount(){this.ref.current.value="ref get input"}render(){return}}

importReactfrom'react'constTargetComponent=React.forwardRef(()=>())exportdefaultclassCompextendsReact.Component{constructor(){super();this.ref=React.createRef();}componentDidMount(){this.ref.current.value="ref get input"}render(){return}}