react useRef()函数
React 函数
2023-09-14 08:58:44 时间
“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源码解析6.legacy模式和concurrent模式
- React saga_react获取子组件ref
- React技巧之处理tab页关闭事件
- react 父子传值_react 父子组件传值 兄弟组件传值「建议收藏」
- React源码学习入门(一)新手如何学习React源码
- 一天梳理React面试高频知识点
- 「使用 webpack 5 从0到1搭建React+TypeScript 项目环境」2. 集成 css、less 与 sass
- React魔法堂:echarts-for-react源码略读
- 腾讯前端经典react面试题汇总
- react的jsx和React.createElement是什么关系?面试常问_2023-02-27
- react子父组件相互通信传值系列之——父组件传值与函数给子组
- react源码分析:深度理解React.Context_2023-02-28
- react源码解析11.生命周期调用顺序_2023-02-28
- 滴滴前端二面常考react面试题(持续更新中)_2023-03-01
- 2020年Flutter和 React Native如何选择
- React源码分析--commit
- react hook 完全解读
- React 如何实例化组件?
- React.js基础知识 函数组件和类组件(二)
- 从源码角度看React-Hydrate原理_2023-02-14
- 京东前端高频react面试题及答案_2023-03-15
- react 基础之组件篇二——Style in React
- React Native UI界面还原,组件布局与动画效果