React ref的使用示例

2024-04-02 19:04:59 432人浏览八月长安

摘要

目录什么是 ref 如何使用 ref 放在 dom 元素上放在类组件上放在函数组件上总结写了一段时间的 React，99%都在写 state、prop、useState、use

什么是 ref

官网介绍：

在典型的 React 数据流中，props 是父组件与子组件交互的唯一方式。要修改一个子组件，你需要使用新的 props 来重新渲染它。但是，在某些情况下，你需要在典型数据流之外强制修改子组件。被修改的子组件可能是一个 React 组件的实例，也可能是一个 DOM 元素。对于这两种情况，React 都提供了解决办法，即使用 ref 来获取 dom 或组件实例。

如何使用 ref

放在 dom 元素上

这是 ref 最直接的用法


export class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = createRef()
  }
  componentDidMount() {
    console.log(this.myRef)
  }
  render() {
    return <div ref={this.myRef}>测试</div>
  }
}

打印看一下 ref 是啥

可以看出，ref.current 拿到了 dom 元素，所以我们可以实现 dom 元素本身的一些功能，如 input 的聚焦：


export class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = createRef()
  }

  onClick = () => {
    this.myRef.current.focus()
  }

  render() {
    return (
      <div>
        <button onClick={this.onClick}>聚焦</button>
        <input ref={this.myRef} />
      </div>
    )
  }
}

官网还提供了一种 ref 回调的形式:


export class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = null
  }

  onClick = () => {
    this.myRef.focus()
  }

  render() {
    return (
      <div>
        <button onClick={this.onClick}>聚焦</button>
        <input ref={ele => this.myRef = ele} /> // 这里的 ele 就是该 dom 元素
      </div>
    )
  }
}

放在类组件上

其实组件跟原生 dom 差不多，也是拥有自己的 ui、一些功能的某种元素，所以将 ref 放在组件上，也可以获取到该组件的示例。


// 子组件
class Child extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'xx'
    }
  }
  render() {
    return <div>子元素{this.state.name}</div>
  }
}

export class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = createRef()
  }

  componentDidMount() {
    console.log(this.myRef)
  }

  render() {
    return (
     <Child ref={this.myRef} />
    )
  }
}

那既然可以获取到子组件的实例，我们就可以操作子组件了，比如文章最开始说，我想在父组件里去捞子组件的某些状态值。


class Child extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
  }
  
  onClick = () => {
    this.setState({count: this.state.count+1})
  }

  render() {
    return <button onClick={this.onClick}>点击+1：{this.state.count}</button>
  }
}

export class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = createRef()
  }

  onClick = () => {
    console.log(this.myRef.current.state.count) // 拿到子组件的状态值
  }


  render() {
    return (
      <div>
        <button onClick={this.onClick}>获取子组件的点击次数</button>
        <Child ref={this.myRef} /> // ref 获取到子组件实例
      </div>
    )
  }
}

既然能拿值，我也能拿函数去修改子组件


class Child extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'xx'
    }
  }
  changeName = () => {
    this.setState({name: 'ww'})
  }
  render() {
    return <div>子元素{this.state.name}</div>
  }
}

export class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = createRef()
  }

  onClick = () => {
    this.myRef.current.changeName() // 父组件的手伸到子组件里去啦
  }

  render() {
    return (
      <div>
        <button onClick={this.onClick}>改变子组件的状态</button>
        <Child ref={this.myRef} />
      </div>
    )
  }
}

当然这个例子并不恰当，父组件想更改子组件的状态的话，应该把状态提升到父组件中，然后作为子组件的props传递进去。
主要是 ref 提供一种方式去绕过 props 来实现父子组件通信。

放在函数组件上

这是我文章开头写需求时犯的错，ref 不能放在函数组件上，因为函数组件没有实例。


const Child = () => {
  return <div>子组件</div>
}

export const Demo = () => {
  const myRef = useRef() // 可以在函数组件内创建 ref

  useEffect(() => {
    console.log(myRef)
  }, [])

  return <Child ref={myRef} /> // 但是放在函数组件上无效
}

那函数组件就不能使用 ref 了吗，那肯定不是哈哈。我们可以使用 forwardRef 包装函数组件。


const Child = (props, ref) => { // 包装后，除了原有的 props 外， ref 也被传了进来
  return <div ref={ref}>子组件</div> // 还是得挂载到 dom 上
}

const ProChild = React.forwardRef(Child) // 重点在这里

export const Demo = () => {
  const myRef = useRef()

  useEffect(() => {
    console.log(myRef)
  }, [])

  return <ProChild ref={myRef} />
}

这里贴一下官网的 tip：

那既然函数组件也可以使用 ref 的话，我们用函数组件实现一下父组件捞子组件的数据，不过可以看出，使用 forwardRef 包裹后，ref 还是得挂载到 dom 或者类组件上，如果我只想挂载数据还需要搭配 useImperativeHandle。


const Child = (props, ref) => {
  const [count, setCount] = useState(0)

  useImperativeHandle(
    ref,
    () => ({   // 这里就是暴露给外部 ref 的数据
      getVal: ()=> count
    }),
    [count],
  )

  const onClick = () => {
    setCount(pre => pre+1)
  }
  return <button onClick={onClick}>点击+1：{count}</button>
}

const ProChild = React.forwardRef(Child)

export const Demo = () => {
  const myRef = useRef()

  const onClick = () => {
    console.log(myRef.current.getVal()) // 拿到子组件的值
  }

  return <><button onClick={onClick}>获取子组件的点击次数</button><ProChild ref={myRef} /></>
}

至此完成了做需求时留下的问题 ✅

总结

最后还是需要强调一下，父组件获取子组件状态的场景，一般还是状态提升 + 回调来通信，需求最终也是使用这种方式来实现的，最开始之所以想用 ref，是觉得状态提升后，子组件变化了会引起父组件的重新渲染，但是我只想拿数据而不引起渲染。
跟师傅说了一下我写需求时的想法，师傅见解如下：

优先考虑状态提升
有性能问题的话，考虑状态提升 + memo
不想给多个组件加 memo 的话，就要考虑引入 redux/mobx 了
如果引入 redux/mobx 是一种成本的话，那 ref 也不是不可以哈哈哈

以上就是React ref的使用详解的详细内容，更多关于React ref的使用的资料请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: React ref的使用示例

本文链接: https://www.lsjlt.com/news/123167.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

React ref的使用示例

目录什么是 ref 如何使用 ref 放在 dom 元素上放在类组件上放在函数组件上总结写了一段时间的 react，99%都在写 state、prop、useState、use...

99+

2024-04-02
React ref的使用案例

本篇内容主要讲解“React ref的使用案例”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“React ref的使用案例”吧!什么是 ref官网介绍：在典型的 React 数据流中，props ...

99+

2023-06-14
React中的ref属性的使用示例详解

目录ref 简介1. 字符串形式的ref2. create形式的ref3. 回调函数形式的ref总结：ref 简介 React提供的这个ref属性，表示为对组件真正实例的引用，其实就...

99+

2023-05-17

React ref属性使用 React ref属性
React中ref的示例分析

这篇文章给大家分享的是有关React中ref的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。为了摆脱繁琐的Dom操作, React提倡组件化, 组件内部用数据来驱动视图的...

99+

2024-04-02
React中ref属性的示例分析

这篇文章主要介绍了React中ref属性的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。概述首先，Refs 和 ref 是两个概念，Refs 是 React 提供的可...

99+

2023-06-15
React中的ref怎么使用

这篇文章主要介绍“React中的ref怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“React中的ref怎么使用”文章能帮助大家解决问题。1. ref 的理解与使用对于 Ref 的理解，要从...

99+

2023-07-04
Vue中ref特性的使用示例

这篇文章主要介绍了Vue中ref特性的使用示例，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。一、ref的基本使用ref的使用<!--&...

99+

2024-04-02
React Hook的使用示例

目录一个简单的组件案例更复杂的父子组件案例如何写onSelectReact.ChildrenReact.cloneElement父组件数据如何传递给子组件index数据...

99+

2024-04-02
vue3中使用ref语法糖的示例代码

自从引入组合式 API 的概念以来，一个主要的未解决的问题就是 ref 和响应式对象到底用哪个。响应式对象存在解构丢失响应性的问题，而 ref 需要到处使用 .value 则感觉很繁...

99+

2024-04-02
在 React 中使用 i18next的示例

目录1. 安装依赖2. 在src下创建i18n文件夹2.1 common下的zh-CN.js2.2 common下的en-US.js2.3 在common的index.js文件中引入...

99+

2023-01-06

React 使用 i18next React i18next
vue 3.0 使用ref获取dom元素的示例

前言附上vue3.0文档：Vue3中文文档 - vuejs Vue 2.x获取DOM <div ref="myRef"></div> this.$refs....

99+

2024-04-02
React中classnames库使用示例

目录classnames的引入引入使用 Node.js, Browserify, or webpack:classnames函数的使用数组的形式ES6中使用动态类名结合React一起...

99+

2022-11-13

React classnames库 React classnames
c++中ref的作用示例解析

目录正文示例1：输出：输出：总结正文 C++11 中引入 std::ref 用于取某个变量的引用，这个引入是为了解决一些传参问题。我们知道 C++ 中本来就有引...

99+

2023-05-17

c++ ref作用 c++ ref
React ref的原理和应用

本篇内容介绍了“React ref的原理和应用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！提到 ref或...

99+

2024-04-02
react使用useImperativeHandle示例详解

目录1.前言2.useImperativeHandle初探3.获取元素的几种方式3.1 useRef：获取组件内部元素3.2 forwardRef：父组件获取子组件内部的一个元素3....

99+

2024-04-02
React使用ref方法与场景介绍

目录摘要1.ref的挂载2.使用ref的三种方式3.ref的使用场景摘要不管在Vue中还是React，如果我们想使用一个元素的DOM，不需要通过JS中操纵DOM的方法，它们提供了一...

99+

2022-11-13

React ref React ref用法
React使用高德地图的实现示例(react-amap)

pc版React重构，使用到了高德地图。搜了资料，发现有一个针对React进行封装的地图插件react-amap。官方网址：https://elemefe.github.io/rea...

99+

2024-04-02
React 路由使用示例详解

目录Router简单路由嵌套路由未匹配路由路由传参数索引路由活动链接搜索参数自定义行为useNavigate参考资料Router react-router-dom是一个处理页面跳转的...

99+

2024-04-02
vue3中使用ref和emit来减少props的使用示例详解

目录前言示例示例1示例2前言在之前开发vue2项目中，props 属性在组件中经常使用来进行组件通信。现在在开发vue3项目的过程中，我们开发小组渐渐的减少props的使用，转而用...

99+

2024-04-02
React中的Ref是什么

这篇文章主要介绍React中的Ref是什么，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！Intro在 React 项目中，有很多场景需要用到 Ref。例如使用 ref 属性获取 DO...

99+

2024-04-02