“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. u-boot-2018-09 分析 v1

    下载地址: https://pan.baidu.com/s/1YcQ1XpFyzmNcr1afw1RhgQ 或者:

  2. 利用referer属性,记录百度搜索跳转参数

    从百度搜索结果跳转到指定链接前,百度会发送一些参数,可以利用referer属性,在本站访问时记录百度跳转来之前的一些参数. 利用百度跳转前参数,进行一些相关的seo优化. 目前所用到的一些参数说明如下 ...

  3. golang gob 有什么优势? gob/protobuf/json/xml 效率对比,benchmark 压力测试

    TODO 待研究: https://blog.csdn.net/love_se/article/details/7941876 https://blog.csdn.net/wangshubo1989/ ...

  4. centos7防火墙iptables开放常用端口

    清除所有规则: iptables -F 开放常用tcp端口: iptables -I INPUT -p tcp -m multiport --dports 20,21,22,3690,80,443,4 ...

  5. Initialize a vector in C++ (5 different ways)

    https://www.geeksforgeeks.org/initialize-a-vector-in-cpp-different-ways/ Following are different way ...

  6. 生产系统ELK日志采集系统

    总结下,生产在运转的日志采集系统!后续的扩展在于elasticsearch节点与logstash节点与kafka+zookeeper,目的提高吞吐量!

  7. 使用 Nginx 为 Linux 实例绑定多个域名

    KB: 41467 · 更新时间:2018-11-16 20:26:51     Nginx 是一款广泛应用的 Web 服务器,常用于反向代理.负载均衡器以及 HTTP 缓存等.本文以 CentOS ...

  8. 关于inodes占用100%解决方法

    df -i; 发现inode节点占满: 这个时候如果不知道哪儿节点占用多可以用下边的脚本进行检查,查看到底哪个目录下面的文件最多: for i in /*; do echo $i; find $i | ...

  9. SNF软件开发机器人-子系统-功能-数据列表分页与不分页-瀑布式分页-如何配置?

    [列表]分页 1.效果展示: (1)不分页 (2)普通分页 (3)瀑布式分页 2.使用说明: 打开显示页面,点击开发者选项的简单配置按钮.在功能表信息中选择需要的分页方式.普通分页和瀑布式分页需要配合 ...

  10. Github上 10 个开源免费且优秀的后台控制面板(转)

    https://github.com/ant-design/ant-design-pro https://mp.weixin.qq.com/s/Hn6hI-ubGw6N16nFzPdVLA