React使用ref方法与场景介绍

目录
  • 摘要
  • 1.ref的挂载
  • 2.使用ref的三种方式
  • 3.ref的使用场景

摘要

不管在Vue中还是React,如果我们想使用一个元素的DOM,不需要通过JS中操纵DOM的方法,它们提供了一个专属的API就是ref。

而Vue中的ref可能比较简单,这一篇主要讲一下如何在React中使用ref,以及使用ref的场景。

1.ref的挂载

在React中,ref可以挂载到html元素上,同时也可以挂载在React元素上,看下面的代码:

import React, { Component } from 'react'
// import { findDOMNode } from 'react-dom'
import Child from './Child'
export default class Father extends Component {
  componentDidMount(){
    console.log(this.refs.refElement);
    console.log(this.refs.child);
  }
  render() {
    return (
      <div>
        <input ref={ 'refElement' }></input>
        <Child ref={ 'child' }/>
        <button onClick={this.fn}>123</button>
      </div>
    )
  }
}

控制台的打印为:

可以看到,在React中,ref是可以挂载到HTML元素和React元素上的。

(1)挂载HTML元素,返回真实的DOM

(2)挂载React元素,返回render后的实例对象

同时React也提供了一个方法findDOMNode可以将React元素的ref返回变成真实的DOM元素。

	import { findDOMNode } from 'react-dom'
    console.log(findDOMNode(this.refs.child));

同时在上面的代码我们也可以看出来,ref的挂载是在componentDidMount等生命周期之前执行的。

2.使用ref的三种方式

(1)字符串的方式

import React, { Component } from 'react'
export default class Father extends Component {
  componentDidMount(){
    console.log(this.refs.refElement);
  }
  render() {
    return (
      <div>
        <input ref={ 'refElement' }></input>
        <button onClick={this.fn}>123</button>
      </div>
    )
  }
}

这种方式和Vue的ref比较相似,但是官方目前已经不推荐使用该方式,后续可能还会废弃。

(2)函数的方式

import React, { Component } from 'react'
export default class Father extends Component {
  componentDidMount(){
    console.log(this.refElement);
  }
  render() {
    return (
      <div>
        <input ref={ ref => this.refElement = ref }></input>
        <button onClick={this.fn}>123</button>
      </div>
    )
  }
}

(3)react.CreateRef的方式

import React, { Component } from 'react'
export default class Father extends Component {
  refElement = React.createRef();
  componentDidMount(){
    console.log(this.refElement.current);
  }
  render() {
    return (
      <div>
        <input ref={this.refElement}></input>
        <button onClick={this.fn}>123</button>
      </div>
    )
  }
}

记住这里面通过refElement中的current,获取真实的DOM元素。

3.ref的使用场景

这里我们说一个比较常见的场景,就是点击按钮让输入框聚焦:

import React, { Component } from 'react'
export default class Father extends Component {
  refElement = React.createRef();
  componentDidMount(){
    console.log(this.refElement.current);
  }
  fn = ()=>{
    this.refElement.current.focus();
  }
  render() {
    return (
      <div>
        <input ref={this.refElement}></input>
        <button onClick={this.fn}>聚焦</button>
      </div>
    )
  }
}

通过获取DOM后,调用DOM上的focus方法API,来让input框进行聚焦。

同时ref也可以适用于一些DOM元素的动画效果,例如移动,变大变小,都需要通过ref来控制DOM,进行操作。

到此这篇关于React使用ref方法与场景介绍的文章就介绍到这了,更多相关React ref内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React组件实例三大属性state props refs使用详解

    目录 一. State 1.概念 2.State的简单用法 3. JS绑定事件 4.react 绑定事件 5.react this指向问题 6.修改state值 7.代码简写 二.props 1.概念 2.传参的基础方法.运算符传参 三.refs 定义 字符串形式的ref.回调函数下ref.createRef 创建ref容器 一. State 1.概念 概念:state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合),组件被称为状态机,通过更新组件的state来更新对应的

  • React新文档切记不要滥用Ref

    目录 引言 为什么是逃生舱? 失控的Ref 如何限制失控 人为取消限制 useImperativeHandle 总结 引言 React新文档有个很有意思的细节:useRef.useEffect这两个API的介绍,在文档中所在的章节叫Escape Hatches(逃生舱). 显然,正常航行时是不需要逃生舱的,只有在遇到危险时会用到. 如果开发者过多依赖这两个API,可能是误用. 在React新文档:不要滥用effect哦中我们谈到useEffect的正确使用场景. 今天,我们来聊聊Ref的使用场景

  • React报错解决之ref返回undefined或null

    目录 总览 useEffect 事件 总结 总览 当我们试图在其对应的DOM元素被渲染之前访问其current属性时,React的ref通常会返回undefined或者null.为了解决该问题,可以在useEffect钩子中访问ref,或者当事件触发时再访问ref. import {useRef, useEffect} from 'react'; export default function App() { const ref = useRef(); console.log(ref.curre

  • React组件三大属性之state,props,refs

    目录 1.1基本理解和使用 1.1.1 使用React开发者工具调试 1.1.2 定义组件的方式 1.1.3 注意 1.1.4 渲染类组件标签的基本流程 1.2 组件实例的三大核心属性之一:state 1.2.1 理解 1.2.2 案例 1.2.3 在类式组件使用state 1.2.4 在类式组件使用state的简写方式 1.2.3 强烈注意 1.3 组件实例的三大核心属性之一:props 1.3.1 理解 1.3.3 作用 1.3.4 在类式组件使用props 1.3.5 在函数式组件使用pr

  • React使用ref方法与场景介绍

    目录 摘要 1.ref的挂载 2.使用ref的三种方式 3.ref的使用场景 摘要 不管在Vue中还是React,如果我们想使用一个元素的DOM,不需要通过JS中操纵DOM的方法,它们提供了一个专属的API就是ref. 而Vue中的ref可能比较简单,这一篇主要讲一下如何在React中使用ref,以及使用ref的场景. 1.ref的挂载 在React中,ref可以挂载到html元素上,同时也可以挂载在React元素上,看下面的代码: import React, { Component } fro

  • React中Ref 的使用方法详解

    本文实例讲述了React中Ref 的使用方法.分享给大家供大家参考,具体如下: React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需要在典型数据流之外强制修改子项.要修改的子项可以是React组件的实例,也可以是DOM元素.对于这两种情况,React都提供了api. 何时使用refs refs有一些很好的用例: 1.文本选择或媒体播放. 2.触发势在

  • Vue中ref和$refs的介绍以及使用方法示例

    前言 在JavaScript中需要通过document.querySelector("#demo")来获取dom节点,然后再获取这个节点的值.在Vue中,我们不用获取dom节点,元素绑定ref之后,直接通过this.$refs即可调用,这样可以减少获取dom节点的消耗. ref介绍 ref被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向该子组件实例 通俗的讲,re

  • React this.setState方法使用原理分析介绍

    目录 摘要 1.异步的setState 2.多个setState方法 3.手动实现mySetState 摘要 这一篇文章,主要是简单的实现一下this.setState方法,为了实现该方法,就要知道this.setState方法具有什么特点. 首先在React组件中,我们先定义一个state和setState方法: myState = { value: 0 } mySetState = ( changeState ) =>{ this.setState( this.myState ) } 这里可

  • Node.js中npx命令的使用方法及场景分析

    npx使用教程 今晚在学习Vue-Cli时, 由于突发奇想想试试最新的@4.x.x版本, 但是本地全局安装的脚手架版本是@2.x.x的, 因为不想污染全局于是就想到用npx命令, 一路上踩坑不断, 为了以后能够更好的使用npx并区分其跟npm的指令, 就有了本篇笔记 npm 是从5.2版开始, 增加(自带)了 npx 命令. 如果发现没安装请手动安装: npm i -g npx npm与npx的概念 NPM(Node Package Manager) 是Node.js提供的一个包管理器, 可以使

  • React中setState同步异步场景的使用

    目录 setState同步异步场景 描述 原理 保证内部数据统一 启用并发更新 参考 setState同步异步场景 React通过this.state来访问state,通过this.setState()方法来更新state,当this.setState()方法被调用的时候,React会重新调用render方法来重新渲染UI.相比较于在使用Hooks完成组件下所需要的心智负担,setState就是在使用class完成组件下所需要的心智负担,当然所谓的心智负担也许叫做所必须的基础知识更加合适一些.

  • ahooks解决React闭包问题方法示例

    引言 本文是深入浅出 ahooks 源码系列文章的第三篇,这个系列的目标主要有以下几点: 加深对 React hooks 的理解. 学习如何抽象自定义 hooks.构建属于自己的 React hooks 工具库. 培养阅读学习源码的习惯,工具库是一个对源码阅读不错的选择. 注:本系列对 ahooks 的源码解析是基于 v3.3.13.自己 folk 了一份源码,主要是对源码做了一些解读,可见 详情. 系列文章: 大家都能看得懂的源码 ahooks 整体架构篇 如何使用插件化机制优雅的封装你的请求

  • React 性能优化方法总结

    目录 前言 为什么页面会出现卡顿的现象? React 到底是在哪里出现了卡顿? React 有哪些场景会需要性能优化? 一:父组件刷新,而不波及子组件. 第一种:使用 PureComponent 第三种:函数组件如何判断props的变化的更新呢? 使用 React.memo函数 使用 React.useMemo来实现对子组件的缓冲 一:组件自己控制自己是否刷新 三:减少波及范围,无关刷新数据不存入state中 场景一:无意义重复调用setState,合并相关的state 场景二:和页面刷新没有相

  • React hooks使用方法全面汇总

    目录 1. 前言 2. useState 3. useEffect 4. useLayoutEffect 5. useMemo 6. useCallback 7. useRef 8. useReducer 9. useContext 10. memo 1. 前言 react16.8推出hooks更好的支持函数组件,使用函数组件更容易进行代码的复用,拓展性更强. 2. useState useState类似于class组件的state功能,用于更新视图 import React, { Compon

  • React中useLayoutEffect钩子使用场景详解

    目录 简介 useEffect钩子的概述 钩子流程 useLayoutEffect钩子的概述 钩子流程 什么时候使用useLayoutEffect钩子? 总结 简介 不久前,React对其功能组件进行了一次重大更新(在2019年3月的16.8版本中),终于为这些组件提供了一种变得有状态的方法. 钩子的加入不仅意味着功能组件将能够提供自己的状态,而且还能通过引入useEffect钩子来管理自己的生命周期事件. 此外,这次更新还引入了一个全新的useLayoutEffect钩子,根据React文档,

随机推荐