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

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

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

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

ref可以设置回调函数

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

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

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

例如下面代码:


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

上述代码,渲染到页面时可以发现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 (<div>
<div ref={(node) => refDom = node}>
...
</div>
</div>)
}

这样,可以通过变量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详细用法的更多相关文章

  1. React中ref的用法

    在React数据流中,父子组件唯一的通信方式是通过props属性:那么如果有些场景需要获取某一个真实的DOM元素来交互,这时候就要用到React的refs属性. 1.可以给DOM元素添加ref属性 c ...

  2. React Native ref高级用法&&setNativeProps使用

    ref属性不只是string ref属性不仅接受string类型的参数,而且它还接受一个function作为 callback.这一特性让开发者对ref的使用更加灵活. render() { retu ...

  3. React ref的用法

    React的ref有3种用法: 1. 字符串(已废弃)2. 回调函数3. React.createRef() (React16.3提供) 1. 字符串 最早的ref用法. 1.dom节点上使用,通过t ...

  4. React Native中ref的用法(通过组件的ref属性,来获取真实的组件)

    ref是什么? ref是组件的特殊属性,组件被渲染后,指向组件的一个引用.可以通过组件的ref属性,来获取真实的组件.因为,组件并不是真正的DOM节点,而是存在于内存中的一种数据结构,称为虚拟的DOM ...

  5. React之ref

    作为响应式开发框架React,我们知道他是数据驱动的,但有时候避免不了还是得动用到DOM操作,这个时候我们就可以用到ref:用法如下: 然后这样做有个弊端,当一个 ul 下面的 li 是动态添加的时候 ...

  6. React中Ref 的使用 React-踩坑记_05

    React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需 ...

  7. C#播放声音的四种方法 +AxWindowsMediaPlayer的详细用法

    C#播放声音的四种方法 第一种是利用DirectX 1.安装了DirectX SDK(有9个DLL文件).这里我们只用到MicroSoft.DirectX.dll和 Microsoft.Directx ...

  8. 在DOS下的DEBUG命令的详细用法

    在DOS下的DEBUG命令的详细用法 名称 解释 格式 a (Assemble) 逐行汇编 a [address] c (Compare) 比较两内存块 c range address d (Dump ...

  9. __declspec关键字详细用法

    __declspec关键字详细用法 __declspec用于指定所给定类型的实例的与Microsoft相关的存储方式.其它的有关存储方式的修饰符如static与extern等是C和C++语言的ANSI ...

随机推荐

  1. Spring 使用context:annotation-config的设置

    Spring 使用context:annotation-config的设置: 还是需要声明Bean的,并且还可能自己定义Annotation: xml: <?xml version=" ...

  2. Canvas createLinearGradient API

    createLinearGradient addColorStop <!DOCTYPE html> <html lang="en"> <head> ...

  3. css3基础知识——回顾

    1.属性选择器 完全匹配的属性选择器 [id=article]{} 示例: <style> input[type=text]{ border: 2px solid red;} </s ...

  4. C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心(下)

    译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心(下)),不对的地方欢迎指出与交流. 章节出自<Professional C# 6 ...

  5. ASP.NET Core中的缓存[1]:如何在一个ASP.NET Core应用中使用缓存

    .NET Core针对缓存提供了很好的支持 ,我们不仅可以选择将数据缓存在应用进程自身的内存中,还可以采用分布式的形式将缓存数据存储在一个“中心数据库”中.对于分布式缓存,.NET Core提供了针对 ...

  6. 浅谈Activiti Modeler 的扩展

    为什么要扩展         最近项目打算用activiti工作流中activiti modeler来做模块的可视化订阅,但是原生的activiti任务节点,有一些不符合业务需要,比如 配置项多,属性 ...

  7. Angular2组件与指令的小实践——实现一个图片轮播组件

    如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...

  8. Win32/MFC/COM学习推荐书籍

    以前有不少朋友问关于学习各种技术的推荐书籍的问题,这里把我觉得比较好的一些书籍列一下,希望能起到抛砖引玉的作用就好了:) Win32开发 Programming Windows by Charles ...

  9. javascript组件的基本结构

    (function(window, undefined) { function JsClassName(cfg) { var config = cfg || {}; this.get = functi ...

  10. 基于ES6模块标准通过webpack打包HTM5项目

    本篇主要演示通过webpack打包phaser项目,webpack安装方法在此处就不一一赘述了 经常用phaser来写html5游戏的朋友可能会发现,当游戏场景比较多时,如果都写在一个js文件中那么将 ...