ref用法-编程知识

ref用法

React中提供两种方法创建ref对象：

类组件获取 Ref 三种方式

① Ref属性是一个字符串。

② Ref 属性是一个函数。

③ Ref属性是一个ref对象。

高级用法1：forwardRef 转发 Ref

高级用法2：ref实现组件通信

【ref作用】：最熟悉的就是用 Ref 获取真实 DOM 元素和获取类组件实例，除此之外的功能，ref 派生出一些其他的高级用法，能够解决一些特殊场景下的问题

React中提供两种方法创建ref对象：

第一种：类组件中 React.createRef 创建一个 ref 对象。
class Index extends React.Component{constructor(props){super(props)this.currentDom = React.createRef(null)}componentDidMount(){console.log(this.currentDom)}render= () => <div ref={ this.currentDom } >ref对象模式获取元素或组件</div>
}
第二种：函数组件中 React.useRef 创建 Ref
export default function Index(){const currentDom = React.useRef(null)React.useEffect(()=>{console.log( currentDom.current ) // div},[])return  <div ref={ currentDom } >ref对象模式获取元素或组件</div>
}
【什么是 ref 对象，所谓 ref 对象就是用 createRef 或者 useRef 创建出来的对象】

【问：在函数组件中为什么不能用 createRef ？】
答：类组件有一个实例 instance 能够维护像 ref 这种信息，但函数组件每次更新时所有的变量都会重新声明，此时 ref 就会随着函数组件执行被重置。

类组件获取 Ref 三种方式

① Ref属性是一个字符串。

/* 类组件 */
class Children extends Component{  render=()=><div>hello,world</div>
}/* TODO:  Ref属性是一个字符串 */
export default class Index extends React.Component{componentDidMount(){console.log(this.refs)}render=()=> <div><div ref="currentDom"  >字符串模式获取元素或组件</div><Children ref="currentComInstance"  /></div>
}

React 在底层逻辑，会判断类型，如果是 DOM 元素，会把真实 DOM 绑定在组件 this.refs (组件实例下的 refs )属性上，如果是类组件，会把子组件的实例绑定在 this.refs 上。(函数组件没有实例，不能被 Ref 标记)

② Ref 属性是一个函数。

class Children extends React.Component{  render=()=><div>hello,world</div>
}/* TODO: Ref属性是一个函数 */
export default class Index extends React.Component{currentDom = nullcurrentComponentInstance = nullcomponentDidMount(){console.log(this.currentDom)console.log(this.currentComponentInstance)}render=()=> <div><div ref={(node)=> this.currentDom = node }  >Ref模式获取元素或组件</div><Children ref={(node) => this.currentComponentInstance = node  }  /></div>
}

③ Ref属性是一个ref对象。

class Children extends React.Component{  render=()=><div>hello,world</div>
}export default class Index extends React.Component{currentDom = React.createRef(null)currentComponentInstance = React.createRef(null)componentDidMount(){console.log(this.currentDom)console.log(this.currentComponentInstance)}render=()=> <div><div ref={ this.currentDom }  >Ref对象模式获取元素或组件</div><Children ref={ this.currentComponentInstance }  /></div>
}