React中的Refs属性你来了解吗

1 介绍

react组件的三大属性：

1.props属性：封装传递给组件的参数

2.state属性：组件的状态，当值发生改变后，重新渲染组件

3.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 uref也能获得ref。

2 使用方法

2.1 createref（版本>=react16.3）

一般在构造函数中将refs分配给实例属性，以供组件的其他方法中使用。

1、对于html元素：可以获取元素实例

示例代码：

2、可以和类组件进行绑定 —— 代表类组件的实例

示例代码：

2.2 回调refs

react将在组件挂载时，会调用ref回调函数并传入dom怨怒是，当卸载时调用它并传入null。早componentdidmount或componentdidupdate触发前，reactwrite名词会保选择的艺术证refs一定是最新的。

示例代码：

2.3 string类型的refs（已过时，不推荐使用）

示例代码：

2.4 uref（react hooks）

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注www.887551.com的更多内容!