搜索
首页web前端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);

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

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>
         )
      }
    });

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

ref可以设置字符串

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

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

<input ref="input" />

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

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

获取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>)
}

这样,可以通过变量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中。

以上是react中的ref是什么的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
React父组件怎么调用子组件的方法React父组件怎么调用子组件的方法Dec 27, 2022 pm 07:01 PM

调用方法:1、类组件中的调用可以利用React.createRef()、ref的函数式声明或props自定义onRef属性来实现;2、函数组件、Hook组件中的调用可以利用useImperativeHandle或forwardRef抛出子组件ref来实现。

怎么调试React源码?多种工具下的调试方法介绍怎么调试React源码?多种工具下的调试方法介绍Mar 31, 2023 pm 06:54 PM

怎么调试React源码?下面本篇文章带大家聊聊多种工具下的调试React源码的方法,介绍一下在贡献者、create-react-app、vite项目中如何debugger React的真实源码,希望对大家有所帮助!

深入理解React的自定义Hook深入理解React的自定义HookApr 20, 2023 pm 06:22 PM

React 自定义 Hook 是一种将组件逻辑封装在可重用函数中的方式,它们提供了一种在不编写类的情况下复用状态逻辑的方式。本文将详细介绍如何自定义封装 hook。

React为什么不将Vite作为构建应用的首选React为什么不将Vite作为构建应用的首选Feb 03, 2023 pm 06:41 PM

React为什么不将Vite作为构建应用的首选?下面本篇文章就来带大家聊聊React不将Vite作为默认推荐的原因,希望对大家有所帮助!

7 个很棒且实用的React 组件库(压箱底分享)7 个很棒且实用的React 组件库(压箱底分享)Nov 04, 2022 pm 08:00 PM

本篇文章给大家整理分享7 个很棒且实用的React 组件库,日常开发中经常会用到的,快来收藏试试吧!

react怎么设置div高度react怎么设置div高度Jan 06, 2023 am 10:19 AM

react设置div高度的方法:1、通过css方式实现div高度;2、在state中声明一个对象C,并在该对象中存放更换按钮的样式,然后获取A并重新设置C中的“marginTop”即可。

【翻译】使用自定义hooks对React组件进行重构【翻译】使用自定义hooks对React组件进行重构Jan 17, 2023 pm 08:13 PM

我时常会听到人们谈起React函数组件,提到函数组件会不可避免的变得体积更大,逻辑更复杂。毕竟,我们把组件写在了“一个函数”里,因此你不得不接受组件会膨胀导致这个函数会不断膨胀。

聊聊Vuex与Pinia在设计与实现上的区别聊聊Vuex与Pinia在设计与实现上的区别Dec 07, 2022 pm 06:24 PM

在进行前端项目开发时,状态管理始终是一个绕不开的话题,Vue 与 React 框架本身提供了一部分能力去解决这个问题。但是在开发大型应用时往往有其他考虑,比如需要更规范更完善的操作日志、集成在开发者工具中的时间旅行能力、服务端渲染等。本文以 Vue 框架为例,介绍 Vuex 与 Pinia 这两种状态管理工具在设计与实现上的区别。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境