react的基本知识(React中refs的一些常见用法汇总)
类别:编程学习 浏览量:2953
时间:2021-10-10 00:31:22 react的基本知识
React中refs的一些常见用法汇总目录
- 什么是Refs
- 一、String 类型的 Refs
- 二、回调 Refs
- 三、React.createRef()
- 四、useRef
- 五、Refs 与函数组件
- 总结
Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。
Ref转发是一项将ref自动通过组件传递到子组件的技巧。 通常用来获取DOM节点或者React元素实例的工具。在React中Refs提供了一种方式,允许用户访问dom节点或者在render方法中创建的React元素。
Refs转发
Ref 转发是一个可选特性,其允许某些组件接收 ref,并将其向下传递(换句话说,“转发”它)给子组件。
默认情况下,不能在函数组件上使用 ref 属性,因为它们没有实例:
一、String 类型的 Refs不建议使用,因为 string 类型的 refs 存在一些问题。它已过时并可能会在未来的版本被移除。
import React from "react"; // 父组件 export default class StringRef extends React.PureComponent { componentDidMount() { console.log("stringRefDom:", this.refs.stringRefDom); console.log("stringRefComp:", this.refs.stringRefComp); } render() { return ( <li> {/*原生组件使用方式*/} <li ref={"stringRefDom"}>stringRefDom</li> {/*类组件使用方式*/} <StringRefComp ref={"stringRefComp"} /> </li> ); } } //类组件 class StringRefComp extends React.PureComponent { render() { return <li>StringRefComp</li>; } }
- 如果 ref 回调函数是以内联函数的方式定义的,在更新过程中它会被执行两次
- 第一次传入参数 null,然后第二次会传入参数 DOM 元素
- 这是因为在每次渲染时会创建一个新的函数实例,所以 React 清空旧的 ref 并且设置新的
- 通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题
- 但是大多数情况下它是无关紧要的
import React from "react"; // 父组件 export default class CallbackRef extends React.PureComponent { constructor(props) { super(props); this.callbackRefDom = null; this.callbackRefComp = null; } componentDidMount() { console.log("callbackRefDom:", this.callbackRefDom); console.log("callbackRefComp:", this.callbackRefComp); } //回调函数 setCallbackRefDom = (ref) => { this.callbackRefDom = ref; }; setCallbackRefComp = (ref) => { this.callbackRefComp = ref; }; //回调函数 render() { return ( <li> <li ref={this.setCallbackRefDom}>callbackRefDom</li> <CallbackRefComp ref={this.setCallbackRefComp} /> </li> ); } } //类组件 class CallbackRefComp extends React.PureComponent { render() { return <li>callbackRefComp</li>; } }
- React 16.3 版本引入
- 较早版本的 React,推荐使用回调形式的 refs
import React from "react"; // 父组件 export default class CreateRef extends React.PureComponent { constructor(props) { super(props); this.createRefDom = React.createRef(); this.createRefComp = React.createRef(); } componentDidMount() { console.log("createRefDom:", this.createRefDom.current); console.log("createRefComp:", this.createRefComp.current); } render() { return ( <li> <li ref={this.createRefDom}>createRefDom</li> <CreateRefComp ref={this.createRefComp} /> </li> ); } } //类组件 class CreateRefComp extends React.PureComponent { render() { return <li>CreateRefComp</li>; } }
- Hook 是 React 16.8 的新增特性
import React, { useEffect } from "react"; // 父组件 const UseRef = React.memo(() => { // // 同样可以用 // const createRefDom = React.createRef(); // const createRefComp = React.createRef(); const createRefDom = React.useRef(); const createRefComp = React.useRef(); useEffect(() => { console.log("useRefDom:", createRefDom.current); console.log("useRefComp:", createRefComp.current); }, []); return ( <li> <li ref={createRefDom}>useRefDom</li> <UseRefComp ref={createRefComp} /> </li> ); }); export default UseRef; //类组件 class UseRefComp extends React.PureComponent { render() { return <li>useRefComp</li>; } }
- 默认情况下,你不能在函数组件上使用 ref 属性,因为它们没有实例
- 如果要在函数组件中使用 ref,你可以使用 forwardRef(可与 useImperativeHandle 结合使用)
- 或者将该组件转化为 class 组件。
import React, { useEffect, useImperativeHandle } from "react"; // 父组件 const ForwardRef = React.memo(() => { const createRefComp = React.useRef(); const createRefCompMethod = React.useRef(); useEffect(() => { console.log("useRefComp:", createRefComp.current); console.log("createRefCompMethod:", createRefCompMethod.current); createRefComp.current.reload(); }, []); return ( <li> <ForwardRefFunc ref={createRefComp} /> </li> ); }); export default ForwardRef; const RefFunc = React.forwardRef((props, ref) => { const [name, setName] = React.useState(null); const reload = () => { console.log("reload"); setTimeout(() => { setName("ForwardRefFunc"); }, 3000); }; //useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值 useImperativeHandle(ref, () => { return { reload: reload, }; }); return <li ref={ref}>ForwardRefFunc {name}</li>; }); const ForwardRefFunc = React.memo(RefFunc);
forwardRef 和 useImperativeHandle 最终目的是设法给 ref 提供一个可调用的对象!
- Refs and the DOM
- forwardRef
- useimperativehandle
到此这篇关于React中refs的一些常见用法的文章就介绍到这了,更多相关React中refs用法内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- react组件的参数怎样定义的(详解React中组件之间通信的方式)
- react初学难点(使用react的7个避坑案例小结)
- react的动画实现(React实现动效弹窗组件)
- reactnative动态设置值(react native实现监控手势上下拉动效果)
- react动态创建菜单并实现局部刷新(使用react-virtualized实现图片动态高度长列表的问题)
- react教程简介(react入门级详细笔记)
- react常见问题(React编程中需要注意的两个错误)
- linux虚拟内存实现需要哪六种机制(解析Linux高性能网络IO和Reactor模型)
- react的事件绑定(React事件绑定的方式详解)
- reactredux任务处理进度(一文搞懂redux在react中的初步用法)
- yii2对比springboot(yii2.0框架使用 beforeAction 防非法登陆的方法分析)
- react动态添加组件属性(react使用antd的上传组件实现文件表单一起提交功能完整代码)
- react的基本知识(React中refs的一些常见用法汇总)
- react常用设计模式(提高React界面性能的十个技巧)
- react性能优化是哪个周期(React 并发功能体验前端的并发模式)
- reactnative零基础入门到项目实战(用React Native制作一个简单的游戏引擎)
- 二胎家庭老大爱闹情绪,用这招很有效(二胎家庭老大爱闹情绪)
- 一个30岁男人外遇失败的全过程(一个30岁男人外遇失败的全过程)
- 《无敌破坏王2》 不聊彩蛋,聊聊我从动画里看到的现实那些事儿(无敌破坏王2不聊彩蛋)
- 《寄生虫》 三观不正 人类悲欢从来不相通,感同身受也并非本能(寄生虫三观不正)
- 这部动漫中的女孩子,可比101女孩更加励志(这部动漫中的女孩子)
- 《白狐的人生》热拍 贾征宇偶像包袱难自弃 图(白狐的人生热拍)
热门推荐
- SqlServer数据库中文乱码问题解决方法(SqlServer数据库中文乱码问题解决方法)
- js的事件处理程序底层原理(关于js的事件循环机制剖析)
- dedecms保存文章慢(dedeCms批量修改文章发布时间的方法)
- vue点击事件动态禁用(vue开发移动端使用better-scroll时click事件失效的解决方案)
- sqlserver基础数据类型(SQL Server中T-SQL 数据类型转换详解)
- css3旋转动画教学(css3动画效果抖动解决方法)
- mysql 性能调优技巧(4 款 MySQL 调优工具,公司大神都在用!)
- vue路由跳转的方法(Vue路由监听实现同页面动态加载的示例)
- vue 实现吸顶效果(vue实现水波涟漪效果的点击反馈指令)
- SQL SERVER存储过程调试
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9