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