“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. linux > 和 >> 、< 区别

    linux中经常会用到将内容输出到某文件当中,只需要在执行命令后面加上>或者>>号即可进入操作. 大于号:将一条命令执行结果(标准输出,或者错误输出,本来都要打印到屏幕上面的)重定向 ...

  2. 修正mui的上拉加载和下拉刷新的一次未完成就执行下一次的请求

    有的用户会在第一次 上拉和下拉 事件未完成的时候,就执行第二次,第三次请求.... 提示文字也加上的位置动态计算,修改了mui的部份源码实现,我们的需求达到了 我们来看一下 腾讯新闻 的效果:

  3. vue 父子组件的方法调用

    $emit 子组件触发父组件的方法: <!-- 子组件 --> <template> <div id="child"> <button @ ...

  4. opencv+python-图片文本倾斜校正

    # -*- coding: UTF-8 -*- import numpy as np import cv2 ## 图片旋转 def rotate_bound(image, angle): #获取宽高 ...

  5. vue-cli使用sockjs即时通信

    基于webSocket通信的库主要有 socket.io,SockJS,这次用的是 SockJS. 这里我们使用sockjs-client.stomjs这两个模块,要实现webSocket通信,需要后 ...

  6. VS2008 编译出错 fatal error C1859: unexpected precompiled header error, simply rerunning the compiler might fix this problem

    https://jingyan.baidu.com/article/d8072ac49ebd23ec95cefddd.html

  7. [转]PID控制算法原理

    PID控制算法是工业界使用极其广泛的一个负反馈算法,相信这个算法在做系统软件时也有用武之处,这里摘录了知乎上的一篇文章,后面学习更多后自己总结一篇 以下为原文: PID控制应该算是应用非常广泛的控制算 ...

  8. Jexus 5.4.6 on CentOS 6.6

    Mono 通过脚本安装 https://github.com/cjy37/linux-asp.net-installScript 版本 3.10 MongoDB 也可通过以上脚本安装 默认端口 270 ...

  9. Linux内核剖析(三)构建源码树

    linux源码树结构 参考 http://www.360doc.com/content/13/0410/17/7044580_277403053.shtml 目录 描述 arch 目录包括了所有和体系 ...

  10. Oracle&SQLServer中实现跨库查询

    一.在SQLServer中连接另一个SQLServer库数据 在SQL中,要想在本地库中查询另一个数据库中的数据表时,可以创建一个链接服务器: EXEC master.dbo.sp_addlinked ...