“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. VS2013中Python学习笔记[基础入门]

    前言 在上一节中简单的介绍了在VS2013中如何进行开发Hello World,在VS2013中进行搭建了环境http://www.cnblogs.com/aehyok/p/3986168.html. ...

  2. Linux中非正常关闭vi编辑器产生swp文件怎么删除

    Linux中非正常关闭vi编辑器产生swp文件,会导致编辑文件时提示如下内容(图我是从网上找的): 这是因为异常关闭vi编辑器产生swp文件导致,假设编辑的文件名是file.sh,那么生成的swp文件 ...

  3. PHP异步扩展Swoole笔记(2)

    dispatch_mode, 数据包分发策略 可以选择7种类型,默认为21,轮循模式,收到会轮循分配给每一个Worker进程2,固定模式,根据连接的文件描述符分配Worker.这样可以保证同一个连接发 ...

  4. Python import语句导入模块语法[转]

    Python import语句导入模块语法 社区推荐:掘金是国内最活跃的技术社区,我们每日有优质Python开发实例分享,海量python开源库推送.来掘金,和更多懂技术的小伙伴交流.   pytho ...

  5. dos命令大全 黑客必知的DOS命令集合

    dos命令大全 黑客必知的DOS命令集合 一般来说dos命令都是在dos程序中进行的,如果电脑中安装有dos程序可以从开机选项中选择进入,在windows 系统中我们还可以从开始运行中输入cmd命令进 ...

  6. linux 设备驱动概述

    linux 设备驱动概述 目前,Linux软件工程师大致可分为两个层次: (1)Linux应用软件工程师(Application Software Engineer):       主要利用C库函数和 ...

  7. 性能测试相关(TPS/RT/PV等)(转)

    对于我们开发来说,我们日常最熟悉的工作就是把客户的需求实现并交付.但是,事情并不是往往就这样结束了,我们还需要后续对上线的系统进行跟踪调查,查看系统的运行情况.为什么呢?一方面,我们需要关注系统在运行 ...

  8. eclipse工具中使用Data Source Explorer连接数据库(MySQL)

    1.进入Eclipse工具,打开Data Source Explorer.Window==>Show View==>Data Source Explorer(注:如果找不到请选择Other ...

  9. webpack打包css

    1.第一种方式 1.安装css-loader和style-loader $ cnpm install css-loader style-loader --save-dev 2.引用的时候使用css-l ...

  10. 解决Warning Couldn't flush user prefs: java.util.prefs.BackingStoreException: Couldn't get file lock.

    系统:Ubuntu 16.04 LTS 环境:vscode+java extension pack打开了一个gradle的java项目:另外,用一个terminal启动了groovysh 报错: gr ...