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配置子路由的实现)
- react配置上下文路由(React中Portals与错误边界处理实现)
- react循环有几种方法(React forwardRef的使用方法及注意点)
- react判断数据格式(详解Ref在React中的交叉用法)
- react新手指引页面编写(React+TypeScript进行项目构建案例讲解)
- react hooks详解(React Hooks使用常见的坑)
- react教程简介(react入门级详细笔记)
- react 封装下拉选择框(React鼠标多选功能的配置方法)
- react绑定详解(React列表栏及购物车组件使用详解)
- react usestate实现原理(浅谈react useEffect闭包的坑)
- vscode react jsx语法 开发环境(React-vscode使用jsx语法的问题及解决方法)
- react native web白屏(关于React Native 无法链接模拟器的问题)
- reactnative ios(详解React Native与IOS端之间的交互)
- reactnative示例代码(React Native项目框架搭建的一些心得体会)
- reactnative零基础入门到项目实战(用React Native制作一个简单的游戏引擎)
- 少儿口才表达影响未来一生,50首经典绕口令和孩子玩出聪明大脑(少儿口才表达影响未来一生)
- 玩网游居然让人更友善 很难以让人置信(玩网游居然让人更友善)
- 学好汉语拼音,从娃娃绕口令抓起,平时还是要多练 收藏好(从娃娃绕口令抓起)
- 仙女们的私藏鲜法大PK 鲜香切块牛肉(仙女们的私藏鲜法大PK)
- 天热没胃口 这道菜开胃又下饭,2个小技巧新手一学就会(这道菜开胃又下饭)
- 指天椒紫苏爆炒牛肉(指天椒紫苏爆炒牛肉)
热门推荐
- ExtJs常用代码片段
- springboot怎么用docker(使用docker部署spring boot并接入skywalking的方法)
- mysql 索引使用总结(MySQL复合索引的深入探究)
- docker指定基础镜像命令(Docker重命名镜像名称和TAG操作)
- python对列表排序(Python实现对特定列表进行从小到大排序操作示例)
- dell r730服务器安装操作系统(DELL R730服务器配置RAID与安装服务器系统以及域的控制详细图文教程)
- mysql类型转换函数推荐(mysql 数据类型转换的实现)
- python大数据学习顺序(Python如何处理大数据?3个技巧效率提升攻略推荐)
- python搭建django框架(详解Python网络框架Django和Scrapy安装指南)
- laravel使用队列(基于laravel where的高级使用方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9