React中useRef的具体使用

相信有过React使用经验的人对ref都会熟悉,它可以用来获取组件实例对象或者是DOM对象。

而useRef这个hooks函数,除了传统的用法之外,它还可以“跨渲染周期”保存数据。

首先来看一下它传统的用法:

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

export default function App(props){
  const [count, setCount] = useState(0);

  const doubleCount = useMemo(() => {
    return 2 * count;
  }, [count]);

  const couterRef = useRef();

  useEffect(() => {
    document.title = `The value is ${count}`;
    console.log(couterRef.current);
  }, [count]);

  return (
    <>
      <button ref={couterRef} onClick={() => {setCount(count + 1)}}>Count: {count}, double: {doubleCount}</button>
    </>
  );
}

代码中用useRef创建了couterRef对象,并将其赋给了button的ref属性。这样,通过访问couterRef.current就可以访问到button对应的DOM对象。

然后再来看看它保存数据的用法。

在一个组件中有什么东西可以跨渲染周期,也就是在组件被多次渲染之后依旧不变的属性?第一个想到的应该是state。没错,一个组件的state可以在多次渲染之后依旧不变。但是,state的问题在于一旦修改了它就会造成组件的重新渲染。

那么这个时候就可以使用useRef来跨越渲染周期存储数据,而且对它修改也不会引起组件渲染。

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

export default function App(props){
  const [count, setCount] = useState(0);

  const doubleCount = useMemo(() => {
    return 2 * count;
  }, [count]);

  const timerID = useRef();

  useEffect(() => {
    timerID.current = setInterval(()=>{
        setCount(count => count + 1);
    }, 1000);
  }, []);

  useEffect(()=>{
      if(count > 10){
          clearInterval(timerID.current);
      }
  });

  return (
    <>
      <button ref={couterRef} onClick={() => {setCount(count + 1)}}>Count: {count}, double: {doubleCount}</button>
    </>
  );
}

在上面的例子中,我用ref对象的current属性来存储定时器的ID,这样便可以在多次渲染之后依旧保存定时器ID,从而能正常清除定时器。

到此这篇关于React中useRef的具体使用的文章就介绍到这了,更多相关React useRef内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-04-12

基于React实现表单数据的添加和删除详解

前言 最近在学习React,做了一个简单的Demo,用以自勉及和有需要的朋友们参考学习. 实现功能 在输入框中输入数据后,点击保存按钮,数据将会逐一显示在输入框下方,点击保存后显示的任何一条数据,该数据即可被删除. 实现思路 在开始实现之前,我们需要理清我们的思路,这样才能更好地去完成预定功能. 点击保存按钮时,输入框中的数据读取,可通过onChange绑定事件,获得输入框数据:e.target.value 自定义一个事件,输入数据后,点击保存按钮时,数据的存储操作交由该事件完成 当不断点击保存

详解React中传入组件的props改变时更新组件的几种实现方法

我们使用react的时候常常需要在一个组件传入的props更新时重新渲染该组件,常用的方法是在componentWillReceiveProps中将新的props更新到组件的state中(这种state被成为派生状态(Derived State)),从而实现重新渲染.React 16.3中还引入了一个新的钩子函数getDerivedStateFromProps来专门实现这一需求.但无论是用componentWillReceiveProps还是getDerivedStateFromProps都不是

详解react如何在组件中获取路由参数

路由参数 假如我们有很多 list 页面,这些页面除了动态内容不同,其他的页面部分都相同,这个时候需要怎么配置路由和组件呢? 这种场景就需要用到路由的参数功能,增加一条包含参数的路由配置. import List from './component/list'; <Route path="list/:id" component={List} /> 注意 path 属性中的 :id 就是该路由的参数( param ).再来看看 List 页面的组件. /list 对应了 li

详解各版本React路由的跳转的方法

前言 React-Router已经发布了多个版本,利用路由导航的使用方法都不大一样,在这里总结一下. React-Router 2.0.0 版本 2.0.0版本需要使用browserHistory进行跳转,具体参考一下代码: import { browserHistory } from 'react-router' browserHistory.push('/path') React-Router 2.4.0版本以上 React-Router 2.4.0版本以上,可以通过mixin的方法,使组件

react以create-react-app为基础创建项目

什么是create-react-app create-react-app是一个js库,使用它能够很方便地建立react项目,免去了建立react项目时配置webpack.调试服务器.运行脚本等麻烦,你只需要使用这个库,便可以一键完成react项目的创建初始化项目 首先,要先利用create-react-app创建一个react项目,可参考https://github.com/facebookincubator/create-react-app 注:用"[ ]"包裹的都是可自定义的内容,

在Create React App中启用Sass和Less的方法示例

关于创建 create-react-app 项目请查看:create-react-app 的安装与创建 . 关于在 less 和 sass 如何在 create-react-app 启用 CSS Modules,请查看我的上一篇文章: 在 Create React App 中使用 CSS Modules . 启用 Sass 语法编写 CSS create-react-app 脚手架中已经添加了 sass-loader 的支持,所以只需要安装 node-sass 插件即可 安装 node-sass

在Create React App中使用CSS Modules的方法示例

前提条件 请先进行全局安装 create-react-app 插件哈,安装命令:npm install create-react-app -g 先使用 create-react-app 命令下载一个脚手架工程,安装命令: # 使用 npx $ npx create-react-app my-app # 使用 npm $ npm init npx create-react-app my-app # 使用 yarn $ yarn create react-app my-app 运行项目 $ cd m

vue-cli3.X快速创建项目的方法步骤

1.安装 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过以下方式先卸载它: npm uninstall vue-cli -g # 或 yarn global remove vue-cli vue-cli 3.x安装: npm install -g @vue/cli # OR yarn global add @vue/cli 说明:-g / global 表示全局安装. 安装完成后可通过以下

在Django下创建项目以及设置settings.py教程

进入虚拟环境创建目录(在虚拟环境下不要使用sudo命令) 1.在虚拟环境下安装需要的安装包(注意,不要用sudo命令,否则会安装到真实环境下) pip3 install Django==1.11.8 pip3 install pillow pip3 install pymysql==0.7.11 2. 建立文件夹MyProject,进去MyProject目录创建项目 django-admin startproject fruitday(项目名称,可自定义) 3. 进入 fruitday 创建Ap

npx create-react-app xxx创建项目报错的解决办法

手头有一台大学时代的Windows电脑,它此前没有装过create-react-app,只装了node环境.版本信息:node -> 10.16.3,npm -> 6.9.0.前几日闲的无事想给它装个React,结果失败了,报了错,所以有了下面这出. 安装过程 根据React官方文档(上图)可以发现,此时并不需要安装create-react-app工具,只要你的node >= 8.10 && npm >= 5.6,就可以直接使用npx create-react-ap

Symfony2框架创建项目与模板设置实例详解

本文实例讲述了Symfony2框架创建项目与模板设置的方法.分享给大家供大家参考,具体如下: 环境准备与概览 习惯于在windows使用netbean编辑器并使用virtualbox虚拟centos系统, 预将nginx+php-fpm+mysql,  当然apache也是不错的选择,   使用http://symfony在windows与centos上作为开发域名. 一.下载与环境设置 1. 如何于centos上面建立开发环境不再详述, 当然也可以在windows上面建立开发环境. 2. 关于

使用symfony命令创建项目的方法

本文实例讲述了使用symfony命令创建项目的方法.分享给大家供大家参考,具体如下: 概况 这一章节描述一个Symfony项目的合理结构框架,并且用 symfony 命令初始项目结构. 介绍 在symfony里,一个项目是一个指定域名下的一组服务和有效操作,共享相同的项目模型. 在一个项目里面,应用中的操作是一组逻辑:每个应用都可以正常的独立运行,与相同项目中的其他应用互不干涉. 在多数情况中,一个项目会包含两个应用,一个负责前台显示,一个负责后台处理,使用相同的数据库.当然你也可以在一个项目中

Vue使用vue-cli创建项目

本文介绍了Vue使用vue-cli创建项目,分享给大家,具体如下: vue-cli 是一个官方发布vueJS项目脚手架:https://github.com/vuejs/vue-cli 我创建的模板项目:https://github.com/Aleczhang1992/my-vue-project/tree/dev 一.步骤 1.要求已安装Node.js (>=4.x, 6.x preferred) and Git. 可以设置cnpm可以提升依赖包下载速度: npm install -g cnp

Egret引擎开发指南之创建项目

Egret提供非常方便的创建工具,我们把创建后的文件总和称之为项目.在后面的操作中,我们对创建的项目进行操作,具体创建步骤如下: 需要注意的是Egret支持Windows和Mac OS X 两个平台.在不同平台中,我们使用的Egret命令是相同.对于不同的命令,大家可以参考文档中相关平台的操作介绍. Egret在创建的时候,需要指定创建项目所在目录.Egret会将所有创建后的项目文件全部存放到指定目录中. 1.Windows系统中进入项目目录 我们在Windows中的命令行工具中敲入命令如下图: