React ref、forwardRef 和useRef的学习

最新推荐文章于 2024-07-05 14:46:45 发布
最新推荐文章于 2024-07-05 14:46:45 发布
阅读量2.9k 收藏 8
点赞数
分类专栏： 学习记录 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34086980/article/details/104791790
版权

关于ref

组件内使用ref，获取dom元素

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      myDiv:createRef()
     }
  }

  componentDidMount(){
    console.log("this.myDiv.current", this.state.myDiv.current);
    // 打印结果： this.myDiv.current <div>​ref获取的dom元素​</div>​
  }

  render() { 
    return ( 
      <div ref={this.state.myDiv}>ref获取的dom元素</div>
     );
  }
}
 
export default Test;

ref作为子组件的属性，获取的是该子组件

import React, { Component, createRef } from 'react';

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      myDiv:createRef()
     }
  }

  componentDidMount(){
    console.log("this.myDiv.current", this.state.myDiv.current);
    // 打印的是Child这个子组件（包括属性：props等），而不是Child里面的div
  }

  render() { 
    return ( 
      <Child ref={this.state.myDiv}/>
     );
  }
}

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = { }
  }
  render() { 
    return (  
      <div>我是子组件</div>
    );
  }
}

export default Test;

如果想获得Child里面的div，应该如下修改：

// 父组件
<Child myRef={this.state.myDiv}/>
   
// 子组件
 <div ref={this.props.myRef}>我是子组件</div>

关于forwardRef

简单使用forwardRef

const Child = forwardRef((props, ref)=>{
  return (
  	<div ref={ref}>{props.txt}</div>
  )
})


// 修改父组件
<Child ref={this.state.myDiv} txt="parent props txt"/>

ref属性不能用在函数组件上，因为函数组件没有实例。

forwardRef在高阶组件中的使用

引用传递（Ref forwading）是一种通过组件向子组件自动传递 引用ref 的技术。对于应用者的大多数组件来说没什么作用。但是对于有些重复使用的组件，可能有用。例如某些input组件，需要控制其focus，本来是可以使用ref来控制，但是因为该input已被包裹在组件中，这时就需要使用Ref forward来透过组件获得该input的引用。

作者：pipu
链接：https://www.jianshu.com/p/fac884647720
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

之前在 @Dell Lee 的一篇文章中看到说没有办法传递ref到一个functional stateless component，当时十分naive的项目中实验了一下，以为能够传递ref，结果发现是因为我的疏忽，这个组件上面还有一层HOC，而这个HOC不是functional stateless component我误以为能够传递ref。不过也在探讨过程中发现只要名字不是ref的话其实就可以通过props进行传递。

不过这一切都将成为历史，伟大的fb在react 16.3中新加了一个React.forwardRef函数使这一切变得非常符合我的口味！

import React, { Component, createRef, forwardRef } from 'react';

const bindRef = (WrapperComponent)=>{
  const ConvertRef = (props)=>{
    const { forwardRef, ...other } = props;
    return <WrapperComponent {...other} ref={forwardRef}/>
  }

  return forwardRef((props, ref)=>{
    return (
      <ConvertRef {...props} forwardRef={ref} />
    )
  })
}

const Child = forwardRef((props, ref)=>{
  return (
    <div ref={ref}>{props.txt}</div>
  )
})

const Wrappr = bindRef(Child);

class Test extends Component {
  constructor(props) {
    super(props);
    this.myDiv = createRef();
  }

  componentDidMount(){
    console.log("this.myDiv.current", this.myDiv.current);
  }

  render() { 
    return ( 
      <Wrappr ref={this.myDiv} txt="parent props txt"/>
     );
  }
}

 
export default Test;

关于useRef

比较createRef和useRef

在第一个例子中，我们使用了createRef，为了对比useRef（因为useRef只能在函数组件中使用），所以我们接下来我们把它改成函数组件：

import React, {createRef, useEffect } from 'react';

const Test = ()=>{
  const myDiv = createRef();

  useEffect(()=>{
    console.log("this.myDiv.current", myDiv.current);
  })

  return(
    <div ref={myDiv}>ref获取的dom元素</div>
  )

}
 
export default Test;

我们用useRef替换createRef:

const myDiv = useRef();

效果是一样的。所以为什么会用useRef?

createRef 与 useRef 的区别

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

换句人话说 , useRef 在 react hook 中的作用, 正如官网说的, 它像一个变量, 类似于 this , 它就像一个盒子, 你可以存放任何东西.

*createRef 每次渲染都会返回一个新的引用，而 useRef 每次都会返回相同的引用。*

import React, {useState, useRef, createRef, useEffect } from 'react';

const Test = ()=>{
  const [ index, setIndex ] = useState(1);
  const createRefDiv = createRef();
  const useRefDiv = useRef();

  if(!createRefDiv.current){
    createRefDiv.current = index;
  }

  if(!useRefDiv.current){
    useRefDiv.current = index;
  }

  return(
    <>
      <div>createRefDiv.current: {createRefDiv.current}</div>
      <div>useRefDiv.current: {useRefDiv.current}</div>
      <div>
        <button onClick={()=>setIndex(index+1)}>改变Index</button>
      </div>
    </>
  )

}
 
export default Test;

初始化时createRefDiv.current和useRefDiv.current都等于index，当点击按钮的时候，createRefDiv.current的值发生了改变，但是useRefDiv.current没有。

实际场景

import React, {useState, useRef, createRef, useEffect } from 'react';

const Test = ()=>{
  const [ index, setIndex ] = useState(1);

  const handleAlertClick = ()=>{
   setTimeout(()=>{
    alert("You clicked on: " + index );
   },3000);
  }

  return(
    <>
      <div>You clicked { index } times.</div>
      <button onClick={()=>setIndex(index+1)}>改变Index</button>
      <button onClick={handleAlertClick}>弹出Index</button>
    </>
  )

}
 
export default Test;

当点击改变index的按钮一次之后，点击弹出Index，之后再多次点击改变index，最后弹出来的index的值时2。

import React, {useState, useRef, createRef, useEffect } from 'react';

const Test = ()=>{
  const [ index, setIndex ] = useState(1);
  const lastestIndex = useRef();

  useEffect(()=>{
    lastestIndex.current = index;
  })

  const handleAlertClick = ()=>{
   setTimeout(()=>{
    alert("You clicked on: " + lastestIndex.current );
   },3000);
  }

  return(
    <>
      <div>You clicked { index } times.</div>
      <button onClick={()=>setIndex(index+1)}>改变Index</button>
      <button onClick={handleAlertClick}>改变Index</button>
    </>
  )

}
 
export default Test;

因为 useRef 每次都会返回同一个引用, 所以在 useEffect 中修改的时候 ,在 alert 中也会同时被修改. 这样子, 点击的时候就可以弹出实时的 index了

获取上一次的值

import React, {useState, useRef, createRef, useEffect } from 'react';

const Test = ()=>{
  const [ index, setIndex ] = useState(1);
  const lastestIndex = useRef();

  useEffect(()=>{
    lastestIndex.current = index;
  })

  return(
    <>
      <div>You clicked { index } times.</div>
      <div>lastestIndex.current: { lastestIndex.current }.</div>
      <button onClick={()=>setIndex(index+1)}>改变Index</button>
    </>
  )

}
 
export default Test;

改变为自定义hook

import React, {useState, useRef, createRef, useEffect } from 'react';

const useLastestIndex = state =>{
  const ref = useRef();
  useEffect(()=>{
    ref.current = state;
  })
  return ref.current;
}

const Test = ()=>{
  const [ index, setIndex ] = useState(1);
  const lastestIndex = useLastestIndex(index);


  return(
    <>
      <div>You clicked { index } times.</div>
      <div>lastestIndex: { lastestIndex }.</div>
      <button onClick={()=>setIndex(index+1)}>改变Index</button>
    </>
  )

}
 
export default Test;

总结

  • useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”；
  • ref 对象以 <div ref={myRef} />形式传入组件，则无论该节点如何改变，React 都会将 ref 对象的 .current 属性设置为相应的 DOM 节点，但是useRef()比ref` 属性更有用。它可以很方便地保存任何可变值；
  • useRef 会在每次渲染时返回同一个 ref 对象；
  • 当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。

参考：

Armouy
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-useStateRef:useRef和UseState在一起！
05-03
react-useStateRef useRef和UseState在一起！如何使用安装$ npm i react-usestateref import useState from 'react-usestateref'function MyComponent ( ) { var [ state , setState , ref ] = useState ( 0 ) // ...
React中useRef的使用、React.forwardRef、useImperativeHandle、useLayoutEffect的使用
月光晒了很凉快的博客
10-12 1391
useRef 跟 createRef 类似，都可以用来生成对 DOM 对象的引用，useRef 默认只能在 html 标签中使用，不可以在函数组件中使用。useRef 和 createRef 的区别：createRef 它可以用在类组件和函数组件中，声明时不能给初始值useRef 它只能使用在函数组件中，useRef 它可以在声明时给初始值。
React学习笔记——Hooks中useRef的基础介绍和使用，useRef和createRef的区别
MRlaochen的博客
07-27 1528
在 React 的世界中，有容器组件和 UI 组件之分，在 React Hooks 出现之前，UI 组件我们可以使用函数，无状态组件来展示 UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给 UI 组件进行渲染。使用 React Hooks 相比于从前的类组件有以下几点好处： 代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过 React Hooks 可以将功能代码聚合，方便阅读维护 组件树层级变浅，
一文弄懂 React ref 原理
最新发布
2401_83384536的博客
07-05 638
对于 Ref 理解与使用，一些读者可能还停留在用 ref 获取真实 DOM 元素和获取类组件实例层面上其实 ref 除了这两项常用功能之外，还有很多别的小技巧通过本篇文章的学习，你将收获 React ref 的基本和进阶用法，并且能够明白 React 内部是如何处理 ref 的，并通过一个小 Demo + 提问的方式带你更加深刻地理解 ref 的底层原理forwardRef 不仅可以转发 ref 获取 DOM 元素和组件实例，还可以转发合并后的自定义 ref什么是“合并后的自定义 ref”呢？
React中ref、forwardRef、useRef的简单用法与区别
weixin_44203945的博客
04-21 2011
React Hooks: useRef, useImperativeHandle, forwardRef的使用方法
nihaio25的博客
12-24 901
大家都知道React中的ref属性可以帮助我们获取子组件的实例或者Dom对象，进而对子组件进行修改，是一个很方便的特性。在传统类组件中，我们通过使用 React.createRef() 创建的，并通过 ref属性附加到 React 元素来使用。而随着hooks的越来越广泛的使用，我们有必要了解一下在函数式组件中，如何使用Ref. 想要在函数式组件中使用Ref，我们必须先了解两个Api,useRef和forwardRef
React forwardRef的使用方法
weixin_44240581的博客
06-12 6950
作用与注意点 父组件创建一个ref对象，绑定给子组件中的Dom元素或class组件 forwardRef只能包裹函数组件，类组件不能用 函数组件是没有实例的 父组件获取子组件中Dom元素实例 import React, { useRef } from 'react'; import Content from './content'; const Home = () => { // 创建一个Ref对象 const connectRef = useRef(null); const h
react-forwardref-utils:实用工具来帮助React 16.3+ forwardRef方法
05-18
react-forwardref-utils 实用工具来帮助React 16.3+ 方法 $ npm install --save react-forwardref-utils 用法 import { isForwardRef , forwardRefSymbol , forwardRefFactory , withForwardRef , } from 'react-...
react-hooks-useref
05-28
在React的世界里，Hooks是自React 16.8版本引入的一个重大特性，极大地改变了我们编写函数组件的方式。...对于深入学习React Hooks和提高React编程技巧而言，`useRef`是一个不可忽视的关键知识点。
React中Ref 的使用方法详解
10-15
可以使用`useRef()` Hook（React 16.8+）或`forwardRef()`来解决这个问题。 总之，React中的Ref提供了一种灵活的方式来访问和操作DOM元素或组件实例，但应谨慎使用，避免破坏React的声明式编程原则。正确使用Ref，...
前端React中函数式hooks组件中关于ref使用介绍，以及forwardRef 与 useImperativeHand详解
11-30
在React开发中，`ref`是一个非常重要的...总的来说，`ref`、`forwardRef`和`useImperativeHandle`是React中处理组件间通信和直接操作DOM的强大工具。正确使用它们可以实现复杂的功能，同时保持组件的简洁性和可维护性。
React之ref的高阶用法
梦想成为全栈的切图仔
10-12 1608
如果通过高阶组件包裹一个原始类组件，就会产生一个问题，如果高阶组件HOC没有处理ref，那么由于高阶组件本身会返回一个新的组件，所以当使用HOC包装后组件的时候，标记的ref会指向HOC返回的组件，而并不是HOC包裹的原始类组件，为了解决这个问题，forwardRef可以对HOC做一层处理。在爷爷组件中可以进行使用。比如想要通过标记子组件ref，来获取子组件下的孙组件的某一DOM元素，或者是组件实例。父组件使用 props传递值，将子组件给父组件要说的话的方法传递给子组件，供子组件给父组件进行传递。
React：高阶组件|ref转发
席木木的博客
02-14 891
React：高阶组件|ref转发,介绍子组件通过useImperativeHandle对外暴露句柄；父组件通过ref调用子组件暴露出来的句柄；中间通过forwardRef实现ref的转发。
在TypeScript使用React forwardRef
胡聊前端的博客
10-09 5451
React forwardRef 用于获取子结点的DOM元素引用。当结合TS使用时，需要注意类型断言。 import { forwardRef, useEffect } from "react"; const Test = forwardRef<HTMLDivElement>((props, ref) => { useEffect(() => { console.log(ref.current); }, []); return <div ref={r
React 中ref 的使用（类组件和函数组件）以及forwardRef 与 useImperativeHandle 详解
二三的博客
11-30 6246
在一个父组件中，我们想要获取到其中的节点元素或者子组件实例，从而直接调用其上面的方法。Class 类组件和函数组件是两种不同的写法。父组件使用useRef创建一个 ref 对象，将这个 ref 对象赋给子组件的 ref 属性。子组件使用forwardRef包裹自己，允许作为函数组件的自己使用 ref。然后使用钩子函数，在该钩子函数的第二个函数参数中返回一些状态或方法，这个被返回的状态或方法就可以被父组件访问到。父组件使用创建的 ref 对象的current属性获取子组件暴露出的状态或方法。
React中Ref使用详解（createRef、回调ref、useRef、forwardRef、useImperativeHandle）
AIWWY的博客
03-10 8704
目录 类组件中使用 ref='myRef'(React中不推荐） createRef（推荐） 回调Ref （推荐） 函数组件中使用 React.useRef React.forwardRef React.useImperativeHandle 由于函数组件中没有实例，所以区分2种用法。 类组件中使用 注意你不能在函数组件上使用下面的ref属性，因为他们没有实例。 ref='myRef'(React中不推荐） 和vue中的ref方法使用相同，在元素上添加ref=‘myRef’，.
什么是 useRef , useRef 与 createRef 区别, 以及在什么情况下使用 useRef
2401_84103903的博客
04-08 824
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里领取[外链图片转存中…(img-PC59tOKN-1712571666517)][外链图片转存中…(img-ps0WDpzh-1712571666518)][外链图片转存中…(img-JI6Lcyfv-1712571666518)]
React Forwarding高阶组件传递Refs
weixin_33853794的博客
06-14 394
为什么80%的码农都做不了架构师？>>> ...
《十》高阶组件
花铛
02-26 951
高阶组件也有其缺点：HOC 需要对原组件进行包裹，如果大量使用 HOC，将会产生非常多的嵌套，会让调试变得困难；而且 HOC 可以劫持 pros，在不遵守约定的情况下可能会造成 props 的冲突。，简称 HOC，就是参数为组件，返回值为新组件的函数。高阶组件对原组件进行了一层拦截，就可以对原组件进行各种增强了。高阶组件并不是 React API 的一部分，而是一种基于 React 的组合特性而形成的设计模式。高阶组件的实现案例：通过高阶组件为自定义组件统一注入用户信息作为其 props。
React函数式组件中ref及forwardRef、useImperativeHandle深度解析
总结起来，`ref`、`createRef`、`useRef`、`forwardRef`和`useImperativeHandle`是React中处理组件间交互的重要工具。在Class组件中，`createRef`用于创建`ref`，而在函数组件中，我们需要使用`useRef`。`forwardRef...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值