这篇“React中的Refs属性怎么用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“React中的Refs属性怎么用”文章吧。
1 介绍
react组件的三大属性：
props属性：封装传递给组件的参数
state属性：组件的状态，当值发生改变后，重新渲染组件
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的api useRef也能获得ref。
2 使用方法
2.1 createRef（版本>=React16.3）
一般在构造函数中将refs分配给实例属性，以供组件的其他方法中使用。
对于html元素：可以获取元素实例
示例代码：
class Refs extends React.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> {} <div ref={this.myRef}></div> </div> ); }}
可以和类组件进行绑定 —— 代表类组件的实例
示例代码：
class Refs extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } componentDidMount() { // 在父组件中调用了子组件的方法 this.myRef.current.change(); } render() { return <Children ref={this.myRef}/> }}class Children extends React.Component { change() { console.log("橘猫吃不胖变身"); } render() { return <span>橘猫吃不胖</span> }}2.2 回调Refs
React将在组件挂载时，会调用ref回调函数并传入DOM怨怒是，当卸载时调用它并传入null。早componentDidMount或componentDidUpdate触发前，React会保证refs一定是最新的。
示例代码：
class Refs extends React.Component { constructor(props) { super(props); this.targetRef = null; this.myRef = (e) => this.targetRef = e; } componentDidMount() { console.log("this.refs" + this.refs.container); } render() { return <div ref={this.myRef}> 橘猫吃不胖 </div> }}2.3 String类型的Refs（已过时，不推荐使用）
示例代码：
class Refs extends React.Component { constructor(props) { super(props); this.targetRef = null; this.myRef = (e) => this.targetRef = e; } componentDidMount() { console.log("this.refs" + this.refs.container); } render() { return <div ref={this.myRef}> 橘猫吃不胖 </div> }}2.4 useRef（React Hooks）
function HookRef(props) { const inputElement = useRef(); return ( <div> <input ref={inputElement}/> <button onClick={() => { inputElement.current.focus() }}>获得焦点 </button> </div> )}以上就是关于“React中的Refs属性怎么用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
