“ref”对象是一个通用容器,其current属性是可变的

保存dom

function Test() {
const t = useRef(null); useEffect(() => {
l(t.current); // div
}); return (
<div ref={t}> ... </div>
);
}

保存事件程序

function Test() {
const t = useRef(null);
function handleClick() {
t.current = setTimeout(() => l(1), 2000);
}
function handleClear() {
clearTimeout(t.current);
} return (
<>
<button onClick={handleClick}>start</button>
<button onClick={handleClear}>clear</button>
</>
);
}

存储以前的值

function Test() {
const t = useRef(null);
const [name, setName] = useState("ajanuw");
useEffect(() => {
t.current = name;
});
const prevName = t.current;
return (
<div>
<input value={name} onChange={e => setName(e.target.value)} />
<h2>{name}</h2>
<p>{prevName}</p>
</div>
);
}

react useRef()函数的更多相关文章

  1. 为什么React事件处理函数必须使用Function.bind()绑定this?

    最近在React官网学习Handling Events这一章时,有一处不是很明白.代码如下: class Toggle extends React.Component { constructor(pr ...

  2. React事件处理函数传参问题

    React事件处理函数参数 HTML标签与React 组件是不同的,事件对象e是HTML标签元素的,组件没有的.

  3. react事件处理函数中绑定this的bind()函数

    问题引入 import React, { Component } from 'react'; import { Text, View } from 'react-native'; export def ...

  4. React之函数中的this指向

    我们都知道在React中使用函数时,有两种写法,一是回调函数,二是直接调用,但需要在构造函数中绑定this,只有这样,函数中的this才指向本组件 总结一下没有绑定this的函数中的this指向 不管 ...

  5. (转)React事件处理函数必须使用bind(this)的原因

    1.JavaScript自身特性说明如果传递一个函数名给一个变量,之后通过函数名()的方式进行调用,在方法内部如果使用this则this的指向会丢失.示例代码:首先我们创建test对象并直接调用方法 ...

  6. [React] Create a Persistent Reference to a Value Using React useRef Hook

    The useRef is a hook for creating values that persist across renders. In this lesson we'll learn how ...

  7. React事件函数简介

    一.事件汇总 二.例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset= ...

  8. React事件处理函数的bind复用和name复用

    一.bind复用 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&qu ...

  9. react 中 函数bind 和箭头函数

    用bind形式 方便测试,含有this时候最好用bind形 其他情况用箭头函数 含有this的时候也可以用箭头函数

随机推荐

  1. 安装bootcamp时提示“找不到$winpedriver$文件夹,请验证该文件夹是否和bootcamp处于同一文件夹内?”

    问题:我苹果系统是10.8.3的 装的win7 64位的! 这个bootcamp是我在别人那里拷贝的,我装的时候就这样了,但是别人装是好好的,还有我在MAC系统下载bootcamp的时候我的U盘格式是 ...

  2. springboot上传文件并检查图片大小与格式

    @PostMapping(value = "/uploadDriverImage") public JsonResVo uploadDriverImage(@RequestPara ...

  3. 制作chrome插件/扩展程序,禁止谷歌浏览器访问某些网站

    简单地说,浏览器插件,可以大大的扩展你的浏览器的功能.包括但不仅限于这些功能: 捕捉特定网页的内容 捕捉HTTP报文 捕捉用户浏览动作,改变浏览器地址栏/起始页/书签/Tab等界面元素的行为 与别的站 ...

  4. java/javac命令行如何同时引用多个包;错误 TypeError: 'JavaPackage' object is not callable 的含义

    出现这类错误提示:'JavaPackage' object is not callable,可以看下所引用的jar包或者class文件是否在java的路径搜索范围内 命令行模式下:javac可以编译* ...

  5. golang基础学习及web框架

    golang的web框架 web框架百花齐放:对比 Go Web 编程 Go Web Examples Golang 适合做 Web 开发吗? beego beego简介 go-restful gol ...

  6. 09、高级编程之基于排序机制的wordcount程序

    package sparkcore.java; import java.util.Arrays; import java.util.Iterator; import org.apache.spark. ...

  7. Windows上的字符转换之CP_ACP和CP_OEMCP

    原文地址:http://blog.sina.com.cn/s/blog_53c1950a010158mw.html Windows API函数MultiByteToWideChar用于多字节编码字符串 ...

  8. adb shell 命令详解

    adb介绍 SDK的Tools文件夹下包含着Android模拟器操作的重要命令adb,adb的全称为(Android Debug Bridge就是调试桥的作用.通过adb我们可以在Eclipse中方面 ...

  9. ionic-content 中iframe高度自适应

    http://blog.csdn.net/jesounao/article/details/50945003 无法访问外部url的问题–两个步骤解决: 1.iframe的src属性用ng-src属性替 ...

  10. R语言︱处理缺失数据&&异常值检验、离群点分析、异常值处理

    在数据挖掘的过程中,数据预处理占到了整个过程的60% 脏数据:指一般不符合要求,以及不能直接进行相应分析的数据 脏数据包括:缺失值.异常值.不一致的值.重复数据及含有特殊符号(如#.¥.*)的数据 数 ...