react的useRef
在使用RN动画的时候,看到这样的代码:
const App = () => {
const fadeAnim = useRef(new Animated.Value(0)).current;
// ...
return (
<View style={styles.container}>
<Animated.View
style={[
styles.fadingContainer,
{
opacity: fadeAnim // Bind opacity to animated value
}
]}
>
// ...
</Animated.View>
// ...
</View>
);
}
诶,useRef不应该是用在获取子组件实例的吗,这里这个用法是什么意思。
在搜索文章的时候看到了这样一段话:
useRef的作用:
- useRef 用来获取DOM元素对象
- 保存数据
useRef还可以用来保存数据?于是我就继续到react文档上查了一下,看到了这样一段话:
然而,
useRef()
比ref
属性更有用。它可以很方便地保存任何可变值,其类似于在 class 中使用实例字段的方式。
原来是这样,由于之前使用vue的时候,ref就是指的组件实例,因此到react的时候还是想当然地认为useRef只能用来获取组件实例。
知道了了useRef之后,同时解决了我之前的一个疑惑,那就是在从class组件转到函数式组件时,如何在函数式组件中声明实例变量。如果是使用var、let、const声明变量的话,产生的是函数的局部变量,当组件重渲染后,后一次访问的同名局部变量已经不再是前一个同名的局部变量了。那有了useRef后,就可以轻松地解决这个问题。
react的useRef的更多相关文章
- React Hooks: useRef All In One
React Hooks: useRef All In One useRef https://reactjs.org/docs/hooks-reference.html#useref refs xgqf ...
- React Hooks用法大全
前言 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖 ...
- react实现设置答题器选项个数
一,设置答题器选项import React, { useState, useEffect } from 'react' import PropTypes from 'prop-types' impor ...
- react实现提示消息容器,可以动态添加,删除内部子提示消息
import React, { useState, useRef, useEffect } from 'react' import PropTypes from 'prop-types' import ...
- 手写一个React-Redux,玩转React的Context API
上一篇文章我们手写了一个Redux,但是单纯的Redux只是一个状态机,是没有UI呈现的,所以一般我们使用的时候都会配合一个UI库,比如在React中使用Redux就会用到React-Redux这个库 ...
- react ts redux-saga | 谷歌Chrome浏览器风格的标签组件 | 中台
谷歌Chrome浏览器风格的标签组件 选用技术 react typescript redux-saga存储本地标签数据 umi 实现 [x] 支持全部关闭,当前关闭,关闭其他Tab [x] 支持Tab ...
- 封装react antd的form表单组件
form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...
- 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。
react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...
- react hooks & component will unmount & useEffect & clear up
react hooks & component will unmount & useEffect & clear up useEffect & return === u ...
- 谈谈react hooks的优缺点
前言Hook 是 React 16.8 的新增特性.它是完全可选的,并且100%向后兼容.它可以让你使用函数组件的方式,运用类组件以及 react 其他的一些特性,比如管理状态.生命周期钩子等.从概念 ...
随机推荐
- MongoDB从入门到实战之MongoDB简介
前言 相信很多同学对MongoDB这个非关系型数据库都应该挺熟悉的,在一些高性能.动态扩缩容.高可用.海量数据存储.数据价值较低.高扩展的业务场景下MongoDB可能是我们的首选,因为MongoDB通 ...
- react 高效高质量搭建后台系统 系列 —— 脚手架搭建
其他章节请看: react 高效高质量搭建后台系统 系列 脚手架搭建 本篇主要创建新项目 myspug,以及准备好环境(例如:安装 spug 中用到的包.本地开发和部署.自定义配置 react-app ...
- 希腊字母表及latex代码
希腊字母表及latex代码 字母大写 字母小写 英文名称 latex大写代码 latex小写代码 \(\Alpha\) \(\alpha\) alpha \Alpha \alpha \(\Beta\) ...
- netcore下死RabbitMQ队列、死信队列、延时队列及小应用
关于安装rabbitmq这里一笔掠过了. 下面进入正题: 1.新建aspnetcorewebapi空项目,NormalQueue,删除controllers文件夹已经无关的文件,这里为了偷懒不用con ...
- [python] CairoSVG使用教程
1 CairoSVG介绍 代码下载地址 CairoSVG是一个将SVG1.1转为PNG,PDF, PS格式的转化.SVG算目前火热的图像文件格式了,它的英文全称为Scalable Vector Gra ...
- kafka详解(01) - 概述
kafka详解(01) - 概述 定义:Kafka是一个分布式的基于发布/订阅模式的消息队列(Message Queue),主要应用于大数据实时处理领域. 消息队列 MQ传统应用场景之异步处理 使用消 ...
- Linux利用crontab执行定时任务
Linux利用crontab执行定时任务 crond简介 crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认 ...
- 发布个工具,一键恢复Win8/8.1中的微软拼音长句模式(新体验模式)
(cnBeta:http://www.cnbeta.com/articles/277936.htm) 首先贴个图,大家来一起念台词~ 念完了木有?很激情澎湃义愤填膺有木有? 这事情最早追溯到前年 8 ...
- test20230109考试总结-2023寒搜索专题
前言 2023 年的第一篇考试总结-- 赛时得分情况: A B C D E F G \(\texttt{Total}\) \(\texttt{Rank}\) \(40\) \(80\) \(0\) \ ...
- 通过Google Cloud Storage(GCS)管理Terraform的状态State
管理Terraform状态文件的最佳方式是通过云端的统一的存储,如谷歌云就用GCS. 首先要创建一个Bucket: $ gsutil mb -p pkslow -l us-west1 -b on gs ...