Jadual Kandungan
ref 简介
ref可以设置回调函数
ref可以设置字符串
获取ref引用组件对应的dom节点
ref在有状态组件中的使用
ref在无状态组件中的使用
ref在HOC中存在问题
总结
Rumah hujung hadapan web tutorial js react中的ref是什么

react中的ref是什么

Feb 01, 2021 am 09:13 AM
react.js

ref是React提供的用来操纵React组件实例或者DOM元素的接口;回调函数就是在dom节点或组件上挂载函数,函数的入参是dom节点或组件实例,达到的效果与字符串形式是一样的,都是获取其引用。

react中的ref是什么

在react典型的数据流中,props传递是父子组件交互的唯一方式;通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然,就像react官网所描述的一样,在react典型的数据量之外,某些情况下(例如和第三方的dom库整合,或者某个dom元素focus等)为了修改子组件我们可能需要另一种方式,这就是ref方式。

ref 简介

React提供的这个ref属性,表示为对组件真正实例的引用,其实就是ReactDOM.render()返回的组件实例;需要区分一下,ReactDOM.render()渲染组件时返回的是组件实例;而渲染dom元素时,返回是具体的dom节点。

例如,下面代码:

    const domCom = <button type="button">button</button>;
    const refDom = ReactDOM.render(domCom,container);
    //ConfirmPass的组件内容省略
    const refCom = ReactDOM.render(<ConfirmPass/>,container);
    console.log(refDom);
    console.log(refCom);
Salin selepas log masuk

上述代码返回控制台结果如下图所示:

966d20b4e768d79d3af5ab025222b81.png

ref可以挂到任何组件上,可以挂到组件上也可以是dom元素上;二者不同是与上图答案一样:

挂到组件(这里组件指的是有状态组件)上的ref表示对组件实例的引用,而挂载到dom元素上时表示具体的dom元素节点。

ref可以设置回调函数

ref属性可以设置为一个回调函数,这也是官方强烈推荐的用法;这个函数执行的时机为:

  • 组件被挂载后,回调函数被立即执行,回调函数的参数为该组件的具体实例。

  • 组件被卸载或者原有的ref属性本身发生变化时,回调也会被立即执行,此时回调函数参数为null,以确保内存泄露。

相关推荐:《react教程

例如下面代码:

    RegisterStepTwo = React.createClass({
        getInitialState(){
          return {visible: true};
        },
      changeVisible(){
        this.setState({visible: !this.state.visible});
      },
      refCb(instance){
        console.log(instance);
      },
      render(){
        return(
          <p>
            <button type="button" onClick={this.changeVisible}>{this.state.visible ? '卸载' : '挂载'}ConfirmPass
            </button>
            {
              this.state.visible ?
                <ConfirmPass ref={this.refCb} onChange={this.handleChange}/>: null
             }
           </p>
         )
      }
    });
Salin selepas log masuk

上述代码,渲染到页面时可以发现console.log出对应的组件实例,切换按钮时,ConfirmPass也在挂载与卸载之间切换,所以能看到不同的console.log结果。

ref可以设置字符串

ref还可以设置为字符串值,而不是回调函数;这种方式基本不推荐使用,或者在未来的react版本中不会再支持该方式,但是可以了解一下。

例如下面input设置ref的值为字符串。

<input ref="input" />
Salin selepas log masuk

然后在其他地方如事件回调中通过this.refs.input可以访问到该组件实例,其实就是dom元素节点。

let inputEl = this.refs.input;
//然后通过inputEl来完成后续的逻辑,如focus、获取其值等等
Salin selepas log masuk

获取ref引用组件对应的dom节点

不管ref设置值是回调函数还是字符串,都可以通过ReactDOM.findDOMNode(ref)来获取组件挂载后真正的dom节点。

但是对于html元素使用ref的情况,ref本身引用的就是该元素的实际dom节点,无需使用ReactDOM.findDOMNode(ref)来获取,该方法常用于React组件上的ref。

ref在有状态组件中的使用

上文说到过ref用到react有状态组件时,ref引用的是组件的实例;所以可以通过子组件的ref可以访问到子组件实例的propsstaterefs、实例方法(非继承而来的方法)等等。

使用ref访问子组件情况可能是以下case:

  • 访问子组件的某个具体的dom节点完成某些逻辑,通过this.refs.childComponentRefName.refs.someDomRefName来完成,例如segmentfault上提问者提出的问题。

  • 可以访问子组件的公共实例方法完成某写逻辑。例如子组件定义了一个reset方法用来重置子组件表单元素值,这时父组件可以通过this.refs.childComponentRefName.reset()来完成子组件表单元素的重置。

  • ...

不过话说回来,react不建议在父组件中直接访问子组件的实例方法来完成某些逻辑,在大部分情况下请使用标准的react数据流的方式来代替则更为清晰;

另外,上述case在组件关系嵌套很深时,这种方式就显得极为丑陋。

ref在无状态组件中的使用

上文说到的react组件都是指有状态的,对于无状态组件stateless component而言,正如这篇文章React创建组件的三种方式及其区别里描述的一样,无状态组件是不会被实例化的,在父组件中通过ref来获取无状态子组件时,其值为null,所以:

无法通过ref来获取无状态组件实例。

虽然无法通过ref获取无状态组件实例,但是可以结合复合组件来包装无状态组件来在其上使用ref引用。

另外,对于无状态组件我们想访问的无非是其中包含的组件或者dom元素,我们可以通过一个变量来保存我们想要的组件或者dom元素组件的实例引用。例如下面代码:

function TestComp(props){
    let refDom;
    return (<p>
        <p ref={(node) => refDom = node}>
            ...
        </p>
    </p>)
}
Salin selepas log masuk

这样,可以通过变量refDom来访问到无状态组件中的指定dom元素了,访问其中的其他组件实例类似。

ref在HOC中存在问题

react的HOC是高阶组件,简单理解就是包装了一个低阶的组件,最后返回一个高阶的组件;高阶组件其实是在低阶组件基础上做了一些事情,比方说antd组件的Form create的方法,它就是在为低阶组件封装了一些特殊的属性,比如form属性。

既然HOC会基于低阶组件生成一个新的高阶组件,若用ref就不能访问到我们真正需要的低阶组件实例,我们访问到的其实是高阶组件实例。所以:

若HOC不做特殊处理,ref是无法访问到低阶组件实例的

要想用ref访问低阶组件实例,就必须得HOC支持,就像Redux的connect方法提供的withRef属性来访问低阶组件一样。具体可以参考这里。

总结

ref提供了一种对于react标准的数据流不太适用的情况下组件间交互的方式,例如管理dom元素focus、text selection以及与第三方的dom库整合等等。 但是在大多数情况下应该使用react响应数据流那种方式,不要过度使用ref。

另外,在使用ref时,不用担心会导致内存泄露的问题,react会自动帮你管理好,在组件卸载时ref值也会被销毁。

最后补充一点:

不要在组件的render方法中访问ref引用,render方法只是返回一个虚拟dom,这时组件不一定挂载到dom中或者render返回的虚拟dom不一定会更新到dom中。

Atas ialah kandungan terperinci react中的ref是什么. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara memanggil kaedah komponen anak dalam komponen induk React Cara memanggil kaedah komponen anak dalam komponen induk React Dec 27, 2022 pm 07:01 PM

Kaedah panggilan: 1. Panggilan dalam komponen kelas boleh dilaksanakan dengan menggunakan React.createRef(), pengisytiharan fungsi ref atau props atribut onRef tersuai 2. Panggilan dalam komponen fungsi dan komponen Hook boleh dilaksanakan dengan menggunakan useImperativeHandle atau forwardRef untuk membuang a; Rujuk Komponen kanak-kanak dilaksanakan.

Bagaimana untuk menyahpepijat kod sumber React? Pengenalan kepada kaedah penyahpepijatan menggunakan pelbagai alatan Bagaimana untuk menyahpepijat kod sumber React? Pengenalan kepada kaedah penyahpepijatan menggunakan pelbagai alatan Mar 31, 2023 pm 06:54 PM

Bagaimana untuk menyahpepijat kod sumber React? Artikel berikut akan membincangkan cara untuk menyahpepijat kod sumber React di bawah pelbagai alat, dan memperkenalkan cara untuk menyahpepijat kod sumber sebenar React dalam projek penyumbang, create-react-app, dan vite.

Pemahaman mendalam tentang Hooks tersuai React Pemahaman mendalam tentang Hooks tersuai React Apr 20, 2023 pm 06:22 PM

Cangkuk tersuai bertindak balas ialah cara untuk merangkum logik komponen dalam fungsi boleh guna semula. Ia menyediakan cara untuk menggunakan semula logik keadaan tanpa menulis kelas. Artikel ini akan memperkenalkan secara terperinci cara menyesuaikan cangkuk enkapsulasi.

Mengapa React tidak menggunakan Vite sebagai pilihan pertama untuk membina apl Mengapa React tidak menggunakan Vite sebagai pilihan pertama untuk membina apl Feb 03, 2023 pm 06:41 PM

Mengapa React tidak menggunakan Vite sebagai pilihan pertama untuk membina aplikasi? Artikel berikut akan bercakap dengan anda tentang sebab mengapa React tidak mengesyorkan Vite sebagai pengesyoran lalai. Saya harap ia akan membantu anda!

7 perpustakaan komponen React yang hebat dan praktikal (dikongsi di bawah tekanan) 7 perpustakaan komponen React yang hebat dan praktikal (dikongsi di bawah tekanan) Nov 04, 2022 pm 08:00 PM

Artikel ini akan berkongsi dengan anda 7 perpustakaan komponen React yang hebat dan praktikal yang sering digunakan dalam pembangunan harian. Datang dan kumpulkan dan cuba!

Bagaimana untuk menetapkan ketinggian div dalam tindak balas Bagaimana untuk menetapkan ketinggian div dalam tindak balas Jan 06, 2023 am 10:19 AM

Bagaimana untuk menetapkan ketinggian div dalam tindak balas: 1. Laksanakan ketinggian div melalui CSS 2. Isytiharkan objek C dalam keadaan dan simpan gaya butang perubahan dalam objek, kemudian dapatkan A dan tetapkan semula "marginTop" dalam C; Itulah Can.

[Terjemahan] Refactoring React komponen menggunakan cangkuk tersuai [Terjemahan] Refactoring React komponen menggunakan cangkuk tersuai Jan 17, 2023 pm 08:13 PM

Saya sering mendengar orang bercakap tentang komponen fungsi React, menyebut bahawa komponen fungsi pasti akan menjadi lebih besar dan lebih kompleks secara logik. Lagipun, kami menulis komponen dalam "fungsi", jadi anda perlu menerima bahawa komponen akan berkembang dan fungsi akan terus berkembang.

Mari kita bincangkan tentang perbezaan dalam reka bentuk dan pelaksanaan antara Vuex dan Pinia Mari kita bincangkan tentang perbezaan dalam reka bentuk dan pelaksanaan antara Vuex dan Pinia Dec 07, 2022 pm 06:24 PM

Apabila membangunkan projek hadapan, pengurusan negeri sentiasa menjadi topik yang tidak dapat dielakkan The Vue dan rangka kerja React sendiri menyediakan beberapa keupayaan untuk menyelesaikan masalah ini. Walau bagaimanapun, selalunya terdapat pertimbangan lain apabila membangunkan aplikasi berskala besar, seperti keperluan untuk log operasi yang lebih standard dan lengkap, keupayaan perjalanan masa yang disepadukan dalam alat pembangun, pemaparan bahagian pelayan, dsb. Artikel ini mengambil rangka kerja Vue sebagai contoh untuk memperkenalkan perbezaan dalam reka bentuk dan pelaksanaan dua alatan pengurusan negeri, Vuex dan Pinia.

See all articles