深入浅析React refs的简介

一、是什么

Refs在计算机中称为弹性文件系统(英语:Resilient File System,简称ReFS)

React中的Refs提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素

本质为ReactDOM.render()返回的组件实例,如果是渲染组件则返回的是组件实例,如果渲染dom则返回的是具体的dom节点

二、如何使用

创建ref的形式有三种:

  • 传入字符串,使用时通过 this.refs.传入的字符串的格式获取对应的元素
  • 传入对象,对象是通过 React.createRef()  方式创建出来,使用时获取到创建的对象中存在 current 属性就是对应的元素
  • 传入函数,该函数会在 DOM 被挂载时进行回调,这个函数会传入一个 元素对象,可以自己保存,使用时,直接拿到之前保存的元素对象即可
  • 传入hook,hook是通过 useRef() 方式创建,使用时通过生成hook对象的 current 属性就是对应的元素

传入字符串

只需要在对应元素或组件中ref属性

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref="myref" />;
  }
}

访问当前节点的方式如下:

this.refs.myref.innerHTML = "hello";

传入对象

refs通过React.createRef()创建,然后将ref属性添加到React元素中,如下:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

ref被传递给render中的元素时,对该节点的引用可以在refcurrent属性中访问

const node = this.myRef.current;

传入函数

ref传入为一个函数的时候,在渲染过程中,回调函数参数会传入一个元素对象,然后通过实例将对象进行保存

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={element => this.myref = element} />;
  }
}

获取ref对象只需要通过先前存储的对象即可

const node = this.myref 

传入hook

通过useRef创建一个ref,整体使用方式与React.createRef一致

function App(props) {
  const myref = useRef()
  return (
    <>
      <div ref={myref}></div>
    </>
  )
}

获取ref属性也是通过hook对象的current属性

const node = myref.current;

上述三种情况都是ref属性用于原生HTML元素上,如果ref设置的组件为一个类组件的时候,ref对象接收到的是组件的挂载实例

注意的是,不能在函数组件上使用ref属性,因为他们并没有实例

三、应用场景

在某些情况下,我们会通过使用refs来更新组件,但这种方式并不推荐,更多情况我们是通过propsstate的方式进行去重新渲染子元素

过多使用refs,会使组件的实例或者是DOM结构暴露,违反组件封装的原则

例如,避免在Dialog组件里暴露open()close()方法,最好传递isOpen属性

但下面的场景使用refs非常有用:

  • 对Dom元素的焦点控制、内容选择、控制
  • 对Dom元素的内容设置及媒体播放
  • 对Dom元素的操作和对组件实例的操作
  • 集成第三方 DOM 库

到此这篇关于React refs 的理解的文章就介绍到这了,更多相关React refs 的理解内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React三大属性之Refs的使用详解

    refs是React中用来取得某个JSX组件或者某个DOM中的一些状态值的时候,用来获取节点的方法.在React官方的解释中,它的适用范围如下: 管理焦点,文本选择或媒体播放. 触发强制动画. 集成第三方 DOM 库. React文档中再三强调,请不要过度使用refs,所以当我们可以用dom原生对象解决时,尽量不要使用refs 依照之前的写法,首先是给出类组件和函数组件中refs的写法 类组件 在类中,refs有三种方式,目前最常用的是回调的形式使用,分别进行演示 //直接定义refs,已废弃

  • React组件refs的使用详解

    ref顾名思义我们知道,其实它就可以被看座是一个组件的参考,也可以说是一个标识.作为组件的属性,其属性值可以是一个字符串也可以是一个函数. 其实,ref的使用不是必须的.即使是在其适用的场景中也不是非用不可的,因为使用ref实现的功能同样可以转化成其他的方法来实现.但是,既然ref有其适用的场景,那也就是说ref自有其优势.关于这一点和ref的适用场景,官方文档中是这样说的: 在从 render 方法中返回 UI 结构之后,你可能想冲出 React 虚拟 DOM 的限制,在 render 返回的

  • React中的refs的使用教程

    ref是React中的一种属性,当render函数返回某个组件的实例时,可以给render中的某个虚拟DOM节点添加一个ref属性,如下面的代码所示: <body> <script type="text/jsx"> var App = React.createClass({ render: function() { return ( <div> <input type="text" placeholder="inp

  • React中refs的一些常见用法汇总

    目录 什么是Refs 一.String 类型的 Refs 二.回调 Refs 三.React.createRef() 四.useRef 五.Refs 与函数组件 总结 什么是Refs Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素. Ref转发是一项将ref自动通过组件传递到子组件的技巧. 通常用来获取DOM节点或者React元素实例的工具.在React中Refs提供了一种方式,允许用户访问dom节点或者在render方法中创建的React

  • 深入浅析React refs的简介

    一.是什么 Refs在计算机中称为弹性文件系统(英语:Resilient File System,简称ReFS) React中的Refs提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素 本质为ReactDOM.render()返回的组件实例,如果是渲染组件则返回的是组件实例,如果渲染dom则返回的是具体的dom节点 二.如何使用 创建ref的形式有三种: 传入字符串,使用时通过 this.refs.传入的字符串的格式获取对应的元素 传入对象,对象是通过 React

  • 深入浅析React中diff算法

    React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结构进行重绘与回流,而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM,这样能够最小化操作DOM结构,能够最大程度上减少浏览器重绘与回流的规模. 虚拟DOM diff算法的基础是Virtual DOM,Virtual DOM是一棵以JavaScript对象作为基础的树,

  • 浅析React中的受控组件和非受控组件

    非受控组件 表单数据由DOM本身处理.即不受setState()的控制,与传统的HTML表单输入相似,input输入值即显示最新值(使用 ref从DOM获取表单值) 1.非受控组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body&g

  • 浅析React 对state的理解

    如何定义复杂组件(类组件)与简单组件(函数组件)? 是否具有状态(state) 引出问题,什么是状态? 举个例子,今天考试,考砸了,因为我状态不好,是状态影响了我的行为. 组件中的状态,驱动了页面更新,换句话说,组件状态中存着数据,数据的改变,驱动页面的更新. 这里要了解,state状态是谁身上的状态?state状态是组件实例对象身上的状态,不是组件类本身身上的,是由这个类缔造的实例身上的. (class)组件实例上三大属性之一:state 显示内容 实现一个需求,通过点击页面,炎热/凉爽切换

  • 浅谈React Refs 使用场景及核心要点

    目录 什么是 Refs? 使用方式 Refs 核心要点 避免重复创建 ref 内容 ref.current 存储的内容修改是突变 ref 作为数据存储时内容的变化不会引起 re-render ref 的读写只能在 useEffect 或者回调函数中进行 跨组件传递ref 获取dom时需要借助 forwardRef 包裹组件 ref 绑定的dom在离屏或者未挂载时ref.current 值会被修改为null 最佳实践 dom 操作相关 用于在两次 render 之间传递数据 在使用 React 进

  • React Refs 的使用forwardRef 源码示例解析

    目录 三种使用方式 1. String Refs 2. 回调 Refs 3. createRef 两种使用目的 Refs 转发 createRef 源码 forwardRef 源码 三种使用方式 React 提供了 Refs,帮助我们访问 DOM 节点或在 render 方法中创建的 React 元素. React 提供了三种使用 Ref 的方式: 1. String Refs class App extends React.Component { constructor(props) { su

  • 深入浅析react native es6语法

    react native是直接使用es6来编写代码,许多新语法能提高我们的工作效率 解构赋值 var { StyleSheet,Text,View } = React; 这句代码是ES6 中新增的解构(Destructuring)赋值语句.准许你获取对象的多个属性并且使用一条语句将它们赋给多个变量. 上面的代码等价于: var StyleSheet = React.StyleSheet; var Text = React.Text; var View = React.View 再看几个例子,以前

  • 深入浅析python with语句简介

    with 语句是从 Python 2.5 开始引入的一种与异常处理相关的功能(2.5 版本中要通过 from __future__ import with_statement 导入后才可以使用),从 2.6 版本开始缺省可用(参考 What's new in Python 2.6? 中 with 语句相关部分介绍).with 语句适用于对资源进行访问的场合,确保不管使用过程中是否发生异常都会执行必要的"清理"操作,释放资源,比如文件使用后自动关闭.线程中锁的自动获取和释放等. 术语 要

  • 深入浅析ELK原理与简介

    为什么用到ELK: 一般我们需要进行日志分析场景:直接在日志文件中 grep.awk 就可以获得自己想要的信息.但在规模较大的场景中,此方法效率低下,面临问题包括日志量太大如何归档.文本搜索太慢怎么办.如何多维度查询.需要集中化的日志管理,所有服务器上的日志收集汇总.常见解决思路是建立集中式日志收集系统,将所有节点上的日志统一收集,管理,访问. 一般大型系统是一个分布式部署的架构,不同的服务模块部署在不同的服务器上,问题出现时,大部分情况需要根据问题暴露的关键信息,定位到具体的服务器和服务模块,

  • React-Native 环境搭建和基本介绍

    环境搭建准备 1.环境搭建 React Native中文网 2.开发工具 前端开发软件:Visual Studio Code 移动端开发软件:Xcode.Android Studio 3.知识储备 NodeJS React Es6,Es7 React Native介绍 React Naitve的简介:Facebook在React.js Conf2015大会上推出的一个用于开发Android和iOS App的一个框架,主要编程语言是JavaScript.它的出现使用即拥有Native的用户体验,又

随机推荐