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

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

相关推荐
脑袋大大的1 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络2 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘2 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way2 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家3 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689973 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽5 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头5 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全6 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒