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>
    )
}

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

相关推荐
ᖰ・◡・ᖳ19 分钟前
JavaScript:神奇的ES6之旅
前端·javascript·学习·es6
app出海创收老李24 分钟前
海外独立创收日记(5)-上个月收入回顾与本月计划
前端·后端·程序员
前端Hardy25 分钟前
HTML&CSS:一眼心动的 SVG 时钟
前端·javascript·css
TTGGGFF28 分钟前
Streamlit:CSS——从基础到实战美化应用
前端·css
app出海创收老李36 分钟前
海外独立创收日记(4)-第一笔汇款
前端·后端·程序员
Takklin37 分钟前
React JSX 转换原理与 GSR 实现解析
前端·react.js
苏打水com1 小时前
字节跳动前端业务:从「短视频交互」到「全球化适配」的技术挑战
前端·音视频
又是忙碌的一天1 小时前
前端学习 JavaScript
前端·javascript·学习
Jagger_2 小时前
Cursor + Apifox MCP:告别手动复制接口,AI 助你高效完成接口文档开发
前端
IT_陈寒2 小时前
Redis性能优化:5个被低估的配置项让你的QPS提升50%
前端·人工智能·后端