第
React中的Refs属性你来了解吗
目录1介绍2使用方法2.1createRef（版本=React16.3）2.2回调Refs2.3String类型的Refs（已过时，不推荐使用）2.4useRef（ReactHooks）总结
1介绍
react组件的三大属性：
1.props属性：封装传递给组件的参数
2.state属性：组件的状态，当值发生改变后，重新渲染组件
3.refs属性：
（1）通过该属性可以去访问DOM元素或render函数中的react元素（虚拟的DOM元素）DOM元素或render函数中的react元素的代理（句柄）
（2）本质是ReactDOM.render()函数返回的实例（组件实例或DOM节点）
Refs在计算机中称为弹性文件系统。React中的Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素。本质为ReactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的dom节点。
作用：Refs时React提供给我们安全访问DOM元素或者某个组件实例的句柄。在类组件中，React将ref属性中第一个参数作为DOM中的句柄。在函数组件中，React用hooks的apiuseRef也能获得ref。
2使用方法
2.1createRef（版本=React16.3）
一般在构造函数中将refs分配给实例属性，以供组件的其他方法中使用。
1、对于html元素：可以获取元素实例
示例代码：
classRefsextendsReact.Component{
constructor(props){
super(props);
//在构造函数中初始化一个ref，然后在return中就可以使用了
this.myRef=React.createRef();
console.log(this.myRef);
componentDidMount(){//在render()函数执行完成后调用
this.myRef.current.innerHTML=橘猫吃不胖;//this.myRef中有一个current属性
render(){
return(
div
{/*如果ref属性被用于html，那么它的值就是底层DOM元素*/}
divref={this.myRef}/div
/div
2、可以和类组件进行绑定代表类组件的实例
示例代码：
classRefsextendsReact.Component{
constructor(props){
super(props);
this.myRef=React.createRef();
componentDidMount(){
//在父组件中调用了子组件的方法
this.myRef.current.change();
render(){
returnChildrenref={this.myRef}/
classChildrenextendsReact.Component{
change(){
console.log(橘猫吃不胖变身);
render(){
returnspan橘猫吃不胖/span
2.2回调Refs
React将在组件挂载时，会调用ref回调函数并传入DOM怨怒是，当卸载时调用它并传入null。早componentDidMount或componentDidUpdate触发前，React会保证refs一定是最新的。
示例代码：
classRefsextendsReact.Component{
constructor(props){
super(props);
this.targetRef=null;
this.myRef=(e)=this.targetRef=e;
componentDidMount(){
console.log(this.refs+this.refs.container);
render(){
returndivref={this.myRef}
橘猫吃不胖
/div
2.3String类型的Refs（已过时，不推荐使用）