ref hook之useRef

一、useRef

useRef函数:

1.一个参数:默认值

2.返回一个固定的对象(对象的地址是不会变化的),{current: 值}

javascript 复制代码
import React, { useState } from 'react'

export default function App() {
	const inpRef = React.createRef();
	const [n, setN] = useState(0);
	return (
		<div>
			<input ref={inpRef} type="text" />
			<button onClick={() => {
				console.log(inpRef.current)
			}}>得到input的值</button>

			<input type="number"
				value={n}
				onChange={e => {
					setN(e.target.value)
				}} />
		</div>
	)
}

如上代码,一旦我们input出发了onChange方法,导致组件重新渲染,那么每次就会重新创建inpRef,这对我们来说是完全没有必要的呀。我们希望,一个节点,一直使用一个ref。

推荐使用使用useRef替代createRef即可。

javascript 复制代码
mport React, { useState,useRef } from 'react'
window.arr =[];
export default function App() {
	const inpRef = useRef();
    window.arr.push(inpRef);
	const [n, setN] = useState(0);
	return (
		<div>
			<input ref={inpRef} type="text" />
			<button onClick={() => {
				console.log(inpRef.current)
			}}>得到input的值</button>

			<input type="number"
				value={n}
				onChange={e => {
					setN(e.target.value)
				}} />
		</div>
	)
}

arr中的对象都是相等的,保存的都是一个对象。

二、倒计时

同样的道理,我们每次启动的定时器应该都是同一个,而不是每次生成一个新的再清除。

最早我们是这样写的:

javascript 复制代码
import React, { useState, useEffect } from 'react'
let timer = null;
export default function App() {
	const [n, setN] = useState(10);
	useEffect(() => {//useEffect中使用setTimeInterval要注意,避免循环重复的问题
		if(n === 0){
			return;
		}
		timer = setTimeout(()=>{
			setN(n - 1)
		},1000)
		return () => {
			clearTimeout(timer);
		}
	}, [n])
	return (
		<div>
			<h1>{n}</h1>
		</div>
	)
}

上面的写法有个问题就是若当App这个函数组件被引用多次时,其中一个组件销毁,就会执行clearTimeout函数,对其他的组件有影响。最好的做法是组件节点之间互不影响。

javascript 复制代码
import React, { useRef, useState, useEffect } from 'react'

export default function App() {
	const [n, setN] = useState(10);
	const timerRef = useRef();// 这时保存的不是元素了,可以放置任意值
	useEffect(() => {//useEffect中使用setTimeInterval要注意,避免循环重复的问题
		if(n === 0){
			return;
		}
		timerRef.current = setTimeout(()=>{
			setN(n - 1)
		},1000)
		return () => {
			clearTimeout(timerRef.current);
		}
	}, [n])
	return (
		<div>
			<h1>{n}</h1>
		</div>
	)
}

若setTimerInterval解决呢?

javascript 复制代码
import React, { useState, useRef, useEffect } from 'react'
export default function App() {
    const [n, setN] = useState(10)
    const nRef = useRef(n); // {current:10}
    useEffect(() => {
        const timer = setInterval(() => {
            nRef.current--;
            setN(nRef.current);
            if(nRef.current === 0){
                clearInterval(timer);
            }
        }, 1000)
        return () => {
            clearInterval(timer);
        }
    }, [])
    return (
        <div>
            <h1>{n}</h1>
        </div>
    )
}

相当于实现了是跨越组件多次使用的是用一个对象。

相关推荐
爱吃的强哥8 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信17 分钟前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
谈不譚网安17 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板23 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩24 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真29 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom2 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端