一文讲清楚React中Refs的应用

一文讲清楚React中Refs的应用

1. React Refs是什么

• 简单来说，Refs提供了一种访问DOM节点或者组件实例的方法
• 就好比我们在原生开发中的id一样，我们可以通过document.getElementById拿到对应的DOM节点
• Refs干的就是这个事
• Refs的本质是ReactDOM.render()返回的组件实例，如果是渲染组件，返回饭组件实例，如果是渲染DOM，则返回DOM节点

2. Refs的使用

• Refs的使用跟id的使用是类似的，就是在HTML元素或者组件上创建ref属性并进行赋值
• 不同的是，ref的属性值需要使用React.createRef来创建
• 所以ref属性值会有三种形态

2.1 ref={this.myRef}

import React from 'react'
class App extends React.Component{constructor(props){super(props)this.myRef=React.createRef()}handleClick=()=>{this.myRef.current.innerHTML='new value set by Ref'}render(){return(<div><div ref={this.myRef}>I am div of Ref</div><button onClick={this.handleClick}>set new value by ref</button></div>)}
}
export default App

• 通过this.myRef.current获取当前实例

2.2 ref={fn()}

import React from 'react'
class App extends React.Component{constructor(props){super(props)this.myRef=React.createRef()}handleClick=()=>{this.myRef.innerHTML='new value set by Ref'}render(){return(<div><div ref={e=>this.myRef=e}>I am div of Ref</div><button onClick={this.handleClick}>set new value by ref</button></div>)}
}
export default App

• 如果ref传入的是函数，回调函数的参数会传入一个元素对象，然后通过实例将对象进行保存，通过this.myRef直接获取到实例

2.3 ref={hook}

• 在hooks模式下，我们直接传入一个hook

import React,{useRef} from 'react'
function App(prop){const myRef=useRef()return(<div><div ref={myRef}>I am div of Ref</div><button onClick={()=>{ myRef.current.innerHTML='new value set by Ref' }}>set new value by ref</button></div>)
}
export default App

• 通过myRef.current获得实例