React中的ref怎么使用

exportfunctioncreateRef():RefObject{
constrefObject={
current:null,
}

returnrefObject
}

classChildextendsReact.Component{
render():React.ReactNode{
const{children}=this.props

return(

Child
{children}

)
}
}

/**@descriptionref属性传递字符串*/
classRefDemo1extendsReact.Component{
logger=createLoggerWithScope('RefDemo1')

componentDidMount():void{
this.logger.log(this.refs)
}

render():React.ReactNode{
return(

ref属性传递字符串获取DOM元素
ref属性传递字符串获取类组件实例
>
)
}
}

/**@descriptionref属性传递函数*/
classRefDemo2extendsReact.Component{
logger=createLoggerWithScope('RefDemo2')

refDemo2DOM:HTMLElement|null=null
refDemo2Component:Child|null=null

componentDidMount():void{
this.logger.log(this.refDemo2DOM)
this.logger.log(this.refDemo2Component)
}

render():React.ReactNode{
return(

(this.refDemo2DOM=el)}>
ref属性传递函数获取DOM元素


(this.refDemo2Component=child)}>
ref属性传递函数获取类组件实例

>
)
}
}

/**@descriptionref属性传递对象*/
classRefDemo3extendsReact.Component{
logger=createLoggerWithScope('RefDemo3')

refDemo3DOM=React.createRef()
refDemo3Component=React.createRef()

componentDidMount():void{
this.logger.log(this.refDemo3DOM)
this.logger.log(this.refDemo3Component)
}

render():React.ReactNode{
return(

ref属性传递对象获取DOM元素


ref属性传递对象获取类组件实例

>
)
}
}

/**@description孙组件*/
constChild:React.FC}>=(props)=>{
const{grandRef}=props

return(

Child
要获取的目标元素
>
)
}

/**
*@description父组件
*
*第一个泛型参数是ref的类型
*第二个泛型参数是props的类型
*/
constFather=forwardRef((props,ref)=>{
return(



)
})

/**@description爷组件*/
constGrandFather:React.FC=()=>{
letgrandChildDiv:HTMLDivElement|null=null

useEffect(()=>{
logger.log(grandChildDiv)
},[])

return(

(grandChildDiv=el)}/>


)
}

/**@description自定义ref的类型*/
interfaceCustomRef{
bar:Bar
barButton:HTMLButtonElement
baz:Baz
}

classBazextendsReact.Component{
render():React.ReactNode{
return
Baz
}
}

classBarextendsReact.Component
}>{
buttonEl:HTMLButtonElement|null=null
bazInstance:Baz|null=null

componentDidMount():void{
const{customRef}=this.props

if(customRef){
;(customRefasMutableRefObject).current={
bar:this,
barButton:this.buttonEl!,
baz:this.bazInstance!,
}
}
}

render(){
return(

(this.buttonEl=el)}>Barbutton
(this.bazInstance=instance)}/>
>
)
}
}
constFowardRefBar=forwardRef((props,ref)=>(

))

constFoo:React.FC=()=>{
constcustomRef=useRef(null)

useEffect(()=>{
logger.log(customRef.current)
},[])

return
}

classTestComponentextendsReact.Component{
render():React.ReactNode{
return
TestComponent
}
}

/**@description不使用forwardRef转发HOC中的ref*/
constHOCWithoutForwardRef=(Component:typeofReact.Component)=>{
classWrapComponentextendsReact.Component{
render():React.ReactNode{
return(

WrapComponent


)
}
}

returnWrapComponent
}

constHOCComponent1=HOCWithoutForwardRef(TestComponent)
constRefHOCWithoutForwardRefDemo=()=>{
constlogger=createLoggerWithScope('RefHOCWithoutForwardRefDemo')
constwrapRef=useRef(null)

useEffect(()=>{
//wrapRef指向的是WrapComponent实例而不是HOCComponent1实例
logger.log(wrapRef.current)
},[])

return
}

/**@descriptionHOC中使用forwardRef转发ref*/
constHOCWithForwardRef=(Component:typeofReact.Component)=>{
classWrapComponentextendsReact.Component
}>{
render():React.ReactNode{
const{forwardedRef}=this.props

return(

WrapComponent


)
}
}

returnReact.forwardRef((props,ref)=>(

))
}

constHOCComponent2=HOCWithForwardRef(TestComponent)
constRefHOCWithForwardRefDemo=()=>{
constlogger=createLoggerWithScope('RefHOCWithForwardRefDemo')
consthocComponent2Ref=useRef(null)

useEffect(()=>{
//hocComponent2Ref指向的是HOCComponent2实例
logger.log(hocComponent2Ref.current)
},[])

return
}

/**
*父->子使用ref
*子->父使用props回调
*/
classCommunicationDemoFatherextendsReact.Component{
state:Readonly={
fatherToChildMessage:'',
childToFatherMessage:'',
}

childRef=Rea免费云主机、域名ct.createRef()

/**@description提供给子组件修改父组件中的状态*/
handleChildToFather=(message:string)=>{
this.setState((state)=>({
...state,
childToFatherMessage:message,
}))
}

constructor(props:{}){
super(props)
this.handleChildToFather=this.handleChildToFather.bind(this)
}

render():React.ReactNode{
const{fatherToChildMessage,childToFatherMessage}=this.state

return(

父组件
子组件对我说：{childToFatherMessage}


我对子组件说：

this.setState((state)=>({
...state,
fatherToChildMessage:e.target.value,
}))
}
/>


{/*父->子--使用ref完成组件通信*/}

this.childRef.current?.setFatherToChildMessage(
fatherToChildMessage,
)
}
>
发送





)
}
}

interfaceCommunicationDemoChildProps{
onChildToFather:(message:string)=>void
}
//子组件自己维护状态不依赖于父组件props
interfaceCommunicationDemoChildState{
fatherToChildMessage:string
childToFatherMessage:string
}
classCommunicationDemoChildextendsReact.Component{
state:Readonly={
fatherToChildMessage:'',
childToFatherMessage:'',
}

/**@description暴露给父组件使用的API--修改父到子的消息fatherToChildMessage*/
setFatherToChildMessage(message:string){
this.setState((state)=>({...state,fatherToChildMessage:message}))
}

render():React.ReactNode{
const{onChildToFather:emitChildToFather}=this.props
const{fatherToChildMessage,childToFatherMessage}=this.state

return(

子组件
父组件对我说：{fatherToChildMessage}


我对父组件说：

this.setState((state)=>({
...state,
childToFatherMessage:e.target.value,
}))
}
/>


{/*子->父--使用props回调完成组件通信*/}
emitChildToFather(childToFatherMessage)}>
发送



)
}
}

interfaceChildRef{
setFatherToChildMessage:(message:string)=>void
}

/**
*父->子使用ref
*子->父使用props回调
*/
constCommunicationDemoFunctionComponentFather:React.FC=()=>{
const[fatherToChildMessage,setFatherToChildMessage]=useState('')
const[childToFatherMessage,setChildToFatherMessage]=useState('')

constchildRef=useRef(null)

return(

父组件
子组件对我说：{childToFatherMessage}


我对子组件说：
setFatherToChildMessage(e.target.value)}
/>


{/*父->子--使用ref完成组件通信*/}

childRef.current?.setFatherToChildMessage(fatherToChildMessage)
}
>
发送



setChildToFatherMessage(message)}
/>


)
}

interfaceCommunicationDemoFunctionComponentChildProps{
onChildToFather:(message:string)=>void
}
constCommunicationDemoFunctionComponentChild=forwardRef((props,ref)=>{
const{onChildToFather:emitChildToFather}=props

//子组件自己维护状态不依赖于父组件props
const[fatherToChildMessage,setFatherToChildMessage]=useState('')
const[childToFatherMessage,setChildToFatherMessage]=useState('')

//定义暴露给外界的API
useImperativeHandle(ref,()=>({setFatherToChildMessage}))

return(

子组件
父组件对我说：{fatherToChildMessage}


我对父组件说：
setChildToFatherMessage(e.target.value)}
/>


{/*子->父--使用props回调完成组件通信*/}
emitChildToFather(childToFatherMessage)}>
发送



)
})

interfaceTodoItem{
id:number
name:string
}

consttodoList:TodoItem[]=[
{
id:1,
name:'coding',
},
{
id:2,
name:'eating',
},
{
id:3,
name:'sleeping',
},
{
id:4,
name:'playing',
},
]

constCacheDataWithRefDemo:React.FC=()=>{
constactiveTodoItem=useRef(todoList[0])

//模拟componentDidUpdate--如果改变activeTodoItem后组件没重新渲染，说明视图可以不依赖于activeTodoItem数据
useEffect(()=>{
logger.log('检测组件是否有更新')
})

return(


{todoList.map((todoItem)=>(
(activeTodoItem.current=todoItem)}
>
{todoItem.name}

))}


logger.log(activeTodoItem.current)}>
控制台输出最新的activeTodoItem


)
}

interfaceRefDemo8State{
counter:number
}
classRefDemo8extendsReact.Component{
state:Readonly={
counter:0,
}

el:HTMLDivElement|null=null

render():React.ReactNode{
return(

{
this.el=el
console.log('this.el--',this.el)
}}
>
refelement

this.setState({counter:this.state.counter+1})}
>
add


)
}
}

functioncommitDetachRef(current:Fiber){
//current是已经调和完了的fiber对象
constcurrentRef=current.ref

if(currentRef!==null){
if(typeofcurrentRef==='function'){
//callbackref和stringref执行时机
currentRef(null)
}else{
//objectref处理时机
currentRef.current=null
}
}
}

functioncommitAttachRef(finishedWork:Fiber){
constref=finishedWork.ref
if(ref!==null){
constinstance=finishedWork.stateNode
letinstanceToUse

//处理ref来源
switch(finishedWork.tag){
//HostComponent代表DOM元素类型的tag
caseHostComponent:
instanceToUse=getPublicInstance(instance)
break

//类组件使用组件实例
default:
instanceToUse=instance
}

if(typeofref==='function'){
//callbackref和stringref
ref(instanceToUse)
}else{
//objectref
ref.current=instanceToUse
}
}
}

//从元素上获取ref
constmixedRef=element.ref
conststringRef=''+mixedRef
constref=function(value){
//resolvedInst就是组件实例
constrefs=resolvedInst.refs

if(value===null){
deleterefs[stringRef]
}else{
refs[stringRef]=value
}
}

functioncommitMutationEffectsOnFiber(
finishedWork:Fiber,
root:FiberRoot,
lanes:Lanes,
){
constcurrent=finishedWork.alternate
constflags=finishedWork.flags

if(flags&Ref){
if(current!==null){
//也就是commitDetachRef
safelyDetachRef(current,current.return)
}
}
}

functioncommitLayoutEffectOnFiber(
finishedRoot:FiberRoot,
current:Fiber|null,
finishedWork:Fiber,
committedLanes:Lanes,
){
constflags=finishedWork.flags

if(flags&Ref){
safelyAttachRef(finishedWork,finishedWork.return)
}
}

functionmarkRef(current:Fiber|null,workInProgress:Fiber){
constref=workInProgress.ref

if(
//current===null意味着是初次挂载，fiber首次调和时会打上Reftag
(current===null&&ref!==null)||
//current!==null意味着是更新，此时需要ref发生了变化才会打上Reftag
(current!==null&&current.ref!==ref)
){
//ScheduleaRefeffect
workInProgress.flags|=Ref
}
}

{
this.el=el
console.log('this.el--',this.el)
}}
>
refelement

constlogger=createLoggerWithScope('RefDemo9')

interfaceRefDemo9Props{}
interfaceRefDemo9State{
counter:number
}
classRefDemo9extendsReact.Component{
state:Readonly={
counter:0,
}

el:HTMLDivElement|null=null

constructor(props:RefDemo9Props){
super(props)
this.setElRef=this.setElRef.bind(this)
}

setElRef(el:HTMLDivElement|null){
this.el=el
logger.log('this.el--',this.el)
}

render():React.ReactNode{
return(

refelement
this.setState({counter:this.state.counter+1})}
>
add


)
}
}