react学习—ref Hook

一、ref Hook

1、useRef

useRef函数：

1. 一个参数：默认值
2. 返回一个固定的对象，{current: 值}

import React, { createRef, useState } from 'react'

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

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

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

我么只需要小小改动原来的代码，使用useRef替代createRef即可。

import React, { useRef, useState } from 'react'

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

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

2、其它使用

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

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解决呢？

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

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！