react useRef()函数
“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()函数的更多相关文章
- 为什么React事件处理函数必须使用Function.bind()绑定this?
最近在React官网学习Handling Events这一章时,有一处不是很明白.代码如下: class Toggle extends React.Component { constructor(pr ...
- React事件处理函数传参问题
React事件处理函数参数 HTML标签与React 组件是不同的,事件对象e是HTML标签元素的,组件没有的.
- react事件处理函数中绑定this的bind()函数
问题引入 import React, { Component } from 'react'; import { Text, View } from 'react-native'; export def ...
- React之函数中的this指向
我们都知道在React中使用函数时,有两种写法,一是回调函数,二是直接调用,但需要在构造函数中绑定this,只有这样,函数中的this才指向本组件 总结一下没有绑定this的函数中的this指向 不管 ...
- (转)React事件处理函数必须使用bind(this)的原因
1.JavaScript自身特性说明如果传递一个函数名给一个变量,之后通过函数名()的方式进行调用,在方法内部如果使用this则this的指向会丢失.示例代码:首先我们创建test对象并直接调用方法 ...
- [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 ...
- React事件函数简介
一.事件汇总 二.例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset= ...
- React事件处理函数的bind复用和name复用
一.bind复用 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&qu ...
- react 中 函数bind 和箭头函数
用bind形式 方便测试,含有this时候最好用bind形 其他情况用箭头函数 含有this的时候也可以用箭头函数
随机推荐
- C#异步Task编程模型实战手册
一.课程介绍 本次分享课程属于<C#高级编程实战技能开发宝典课程系列>中的第一部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高级编程的技巧分享出来给大家进行学习,不断的收集.整理 ...
- C#模板引擎NVelocity实战项目演练
一.背景需求 很多人在做邮件模板.短信模板的时候,都是使用特殊标识的字符串进行占位,然后在后台代码中进行Replace字符串,如果遇到表格形式的内容,则需要在后台进行遍历数据集合,进行字符串的拼接,继 ...
- nginx -- 单独访问某个页面404
- ASP.NET Core WebApi
ASP.NET Core WebApi 创建项目 使用VS新建项目,选择ASP.NET Core WebAPI即可. 此时Startup的Configure.ConfigureService方法中如下 ...
- 使用iperf测试网卡吞吐性能
原 使用iperf测试网卡吞吐性能 2018年12月17日 12:38:41 lancewoo 阅读数:138 首先配置待测试的两个网卡的网络地址到同一网段,保证ping对方的IP地址时可以通.两 ...
- 【TCP ZeroWindow】与【TCP window Full】
1.作为接收方,有接收窗口,也就是接收缓冲区,win=xxx 告诉对方,我的接收窗口大小. 2.当我的接收窗口满了,也就是win=0,Wireshark显示[TCP ZeroWindow],这个时候, ...
- DEVOPS落地实践分享
DEVOPS落地实践分享 转载本文需注明出处:微信公众号EAWorld,违者必究. 引言: DevOps的理念已经说了很多年,其带来的价值逐渐被接受,很多企业也逐渐引入了DevOps.目前普元DevO ...
- Mac 解压zip文件错误:无法将"*.zip"解压缩到"" (错误 1-操作不被允许)
错误提示: 无法将"*.zip"解压缩到"" (错误 1-操作不被允许)或者 解压缩失败 英文提示: "Unable to unarchive int ...
- Java之收集很好的Java学习资料地址+博客
https://blog.insanecoder.top/tcp-packet-splice-and-split-issue/ http://blog.csdn.net/qilixiang012/ar ...
- 线程封装组件(BackgroundWorker)和线程(Thread)
BackgroundWorker是微软的在.net Framwork中添加的一个组件,主要对线程的访问提供了一种安全的方式.简单的说就是对Thread的一次封装. BackgroundWorker位于 ...