React中ref屬性的示例分析

這篇文章主要介紹了React中ref屬性的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

概述

首先，Refs 和 ref 是兩個(gè)概念，Refs 是 React 提供的可用特定 API 創(chuàng)建的一個(gè)對(duì)象。該對(duì)象的結(jié)構(gòu)如下：

這個(gè)對(duì)象只有一個(gè)屬性就是 current ，那么這個(gè)對(duì)象是用來干嘛的呢？

Refs 允許我們?cè)L問 DOM 節(jié)點(diǎn)或在 render 方法中創(chuàng)建的 React 元素。（DOM節(jié)點(diǎn)就是指原生DOM元素，在render()方法中創(chuàng)建的 React 元素就是指 React 的類組件元素）

我們可以想象這樣一個(gè)需求，兩個(gè)兄弟元素，一個(gè)是 div ，一個(gè)是 button?，F(xiàn)在想實(shí)現(xiàn)點(diǎn)擊 button，改變 div 的背景顏色。在原生的 DOM 技術(shù)中，我們可以在 button 的點(diǎn)擊函數(shù)里使用 document.querySelector('xxx') 的方式選中 div 節(jié)點(diǎn)，然后改變其背景樣式。但是無論是在 Vue 還是 React 這樣的框架中，頁面元素都是動(dòng)態(tài)生成的，無法使用 DOM API 獲取的方式。而且 React 中大部分操作的元素不是 原生DOM元素，而是 React 元素。 那么如何選擇到某一個(gè) 原生DOM元素 或者 React 元素呢？

其實(shí)，理論上，我們不需要進(jìn)行任何的選擇操作，這樣會(huì)失去前端框架中組件獨(dú)立的概念。一般情況下是通過 組件通信 的方式進(jìn)行事件的處理的。上述的情況可以使用 EventBus 的方式進(jìn)行組件通信，button 的點(diǎn)擊事件中進(jìn)行自定義事件的觸發(fā)，在 div 中進(jìn)行自定義事件的監(jiān)聽，讓 button 以事件通知的方式告知 div 讓其改變背景色，而不是在 button 的事件中直接獲取 div 進(jìn)行操作。

但是 React 為我們提供了直接訪問 DOM元素 和 React 元素的方式，就是通過 Refs。使用的方式很簡(jiǎn)單，就是，為想要訪問的元素上添加 ref 屬性，將 Refs 對(duì)象附加到 ref 屬性上，那么此時(shí) Refs 對(duì)象的 current 屬性就不再是空，而是對(duì)應(yīng)的 DOM元素 或 React 元素實(shí)例了。

1. Refs 對(duì)象的創(chuàng)建

在 React 中，創(chuàng)建 Ref 對(duì)象的方式有兩種：

1.1 React.createRef()

使用 React.createRef() 的方式可以創(chuàng)建一個(gè) Ref 對(duì)象，可通過附加到 ref 屬性上訪問一個(gè) 原生DOM元素 或者 class 組件。
這種方式既可以在函數(shù)組件中使用，也可以在class組件中使用。

1.2 React.useRef(initialValue)

在 React 16.8 中新增了 Hook 后，又多了一個(gè)可以創(chuàng)建 Ref 對(duì)象的 Hook。即 React.useRef(initialValue)。
useRef 返回一個(gè)可變的 ref 對(duì)象，其 .current 屬性被初始化為傳入的參數(shù)（initialValue）。返回的 ref 對(duì)象在組件的整個(gè)生命周期內(nèi)保持不變。
這種方式只能在函數(shù)組件中使用。

2. ref 屬性的使用

ref 屬性只能被添加到 原生DOM元素 或者 React的 class 組件上。不能在 函數(shù)組件 上使用 ref 屬性，因?yàn)楹瘮?shù)組件沒有實(shí)例。

若想在函數(shù)組件上使用 ref 屬性，可以通過 React.forwardRef 將 Ref 轉(zhuǎn)發(fā)到函數(shù)組件內(nèi)部的 原生 DOM 元素上。

2.1 為原生DOM元素添加 ref

class類組件內(nèi)部

class App extends React.Component{
    constructor(props){
        super(props)
        this.myRef = React.createRef()
    } 
    componentDidMount(){
        console.log(this.myRef)
        console.log(this.myRef.current)
    }
    render(){
        return (
            <div ref={this.myRef}>我是App組件</div>
        )
    }
}

函數(shù)組件內(nèi)部

const App = ()=>{
    const myRef = React.useRef(null)
    //const myRef = React.createRef() 兩種創(chuàng)建 ref 對(duì)象的方式都可以
    React.useEffect(()=>{
        console.log(myRef)
        console.log(myRef.current)
    },[]) //模擬生命周期
    return (
        <div ref={myRef}>我是函數(shù)組件內(nèi)部使用ref的div</div>
    )
}

2.2 為class組件添加 ref

class ClassChild extends React.Component{
    render(){
        return (
            <div>我是App組件的 class 子組件 ClassChild</div>
        )
    }
}

class App extends React.Component{
    constructor(props){
        super(props)
        this.myRef = React.createRef()
    } 
    componentDidMount(){
        console.log(this.myRef)
        console.log(this.myRef.current)
    }
    render(){
        return (
            <ClassChild ref={this.myRef}/>
        )
    }
}

2.3 為class組件轉(zhuǎn)發(fā)的原生DOM元素添加 ref

ref 轉(zhuǎn)發(fā)原理就是將父組件中定義的 ref 對(duì)象當(dāng)作普通屬性的方式傳遞給子組件，然后子組件通過 props 接收再賦值給自己 DOM元素 上。

class ClassChild extends React.Component{
    render(){
        return (
            <div ref={this.props.refProp}>我是App組件的 class 子組件 ClassChild</div> //添加了 ref
        )
    }
}

class App extends React.Component{
    constructor(props){
        super(props)
        this.myRef = React.createRef()
    } 
    componentDidMount(){
        console.log(this.myRef)
        console.log(this.myRef.current)
    }
    render(){
        return (
            <ClassChild refProp={this.myRef}/> //作為普通屬性傳遞
        )
    }
}

2.4 為函數(shù)組件轉(zhuǎn)發(fā)的原生DOM元素添加 ref

根據(jù)class類組件轉(zhuǎn)發(fā)的原理，我想到的實(shí)現(xiàn)方法如下：

const FunChild = (props)=>{
    return (
        <div ref={props.refProp}>我是函數(shù)組件 FunChild</div>
    )
}
class App extends React.Component{
    constructor(props){
        super(props)
        this.myRef = React.createRef()
    } 
    componentDidMount(){
        console.log(this.myRef)
        console.log(this.myRef.current)
    }
    render(){
        return (
            <FunChild refProp={this.myRef}/>
        )
    }
}

這種實(shí)現(xiàn)方式是可以的，但這不是在 函數(shù)組件 上直接使用 ref 屬性的方式，React 提供了在函數(shù)組件上直接使用 ref 的方式，就是使用 React.forwardRef 創(chuàng)建 React 元素。

React.forwardRef

const FunChild = React.forwardRef((props, ref)=>{
    return (
        <div ref={ref}>我是函數(shù)組件 FunChild</div>
    )
}) // 使用 React.forwardRef 改造函數(shù)組件
class App extends React.Component{
    constructor(props){
        super(props)
        this.myRef = React.createRef()
    } 
    componentDidMount(){
        console.log(this.myRef)
        console.log(this.myRef.current)
    }
    render(){
        return (
            <FunChild ref={this.myRef}/>  //直接給函數(shù)組件傳遞 ref
        )
    }
}

感覺 React.forwardRef 就是把 ref 屬性單獨(dú)從 props 中抽離出來了。
盡管上述方式實(shí)現(xiàn)了在函數(shù)組件上使用 ref 屬性，但此時(shí)的 Ref 對(duì)象是訪問的函數(shù)組件內(nèi)部的 原生DOM元素 或其他 class組件。也就是說，在這里函數(shù)組件只是起到了一個(gè)轉(zhuǎn)發(fā)的作用。

3. 回調(diào) Refs

上述的方式中，我們都是通過創(chuàng)建一個(gè) Ref 對(duì)象，通過 ref 屬性的方式掛載到 原生DOM元素 或者 class 組件上用于訪問該元素或?qū)嵗?br/>實(shí)際上，ref 屬性除了可以接收一個(gè) Ref 對(duì)象外，還可以接收一個(gè)回調(diào)函數(shù)。
當(dāng) ref 屬性接收 Ref 對(duì)象時(shí)，會(huì)將其對(duì)應(yīng)的 DOM元素 或者 class組件實(shí)例 直接賦值給 Ref 對(duì)象中的 current 屬性上。而當(dāng) ref 屬性接收一個(gè)回調(diào)函數(shù)時(shí)，會(huì)將其對(duì)應(yīng)的 DOM元素 或 class組件實(shí)例作為回調(diào)函數(shù)的參數(shù)調(diào)用回調(diào)函數(shù)。
因此我們可以通過回調(diào) Refs 的方式不依靠 Ref 對(duì)象，更靈活地控制要訪問的元素或?qū)嵗?/p>

class App extends React.Component{
    constructor(props){
        super(props)
        this.myRef = null
        this.setMyRef = (element)=>{
            this.myRef = element
        }
    } 
    componentDidMount(){
        console.log(this.myRef)
    }
    render(){
        return (
            <div ref={this.setMyRef}>我是App組件</div>
        )
    }
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“React中ref屬性的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!