useRef Hook 概述
- useRef 就是 createRef 的 Hook 版本, 只不过比 createRef 更强大一点
首先先来看 createRef 获取，代码如下：
import React, {createRef} from 'react'; class Home extends React.PureComponent { render() { return ( <div>Home</div> ) } } function About() { return ( <div>About</div> ) } function App() { const pRef = createRef(); const homeRef = createRef(); function btnClick() { console.log(pRef.current); console.log(homeRef.current); } return ( <div> <p ref={pRef}>我是段落</p> <Home ref={homeRef}/> <About/> <button onClick={() => { btnClick() }}>获取 </button> </div> ) } export default App;
在看通过 useRef 获取：
import React, {useRef} from 'react'; class Home extends React.PureComponent { render() { return ( <div>Home</div> ) } } function About() { return ( <div>About</div> ) } function App() { const pRef = useRef(); const homeRef = useRef(); function btnClick() { console.log(pRef.current); console.log(homeRef.current); } return ( <div> <p ref={pRef}>我是段落</p> <Home ref={homeRef}/> <About/> <button onClick={() => { btnClick() }}>获取 </button> </div> ) } export default App;
通过两次的运行之后，可以发现都是可以获取到的。
createRef 和 useRef 的区别
- useRef 除了可以用来获取元素以外, 还可以用来保存数据
首先我们分别使用两个不同的 Ref 来获取一下元素，然后在把对应的元素打印出来查看结果：
import React, {useRef, createRef} from 'react'; class Home extends React.PureComponent { render() { return ( <div>Home</div> ) } } function About() { return ( <div>About</div> ) } function App() { const pRef = createRef(); const homeRef = useRef(); function btnClick() { console.log(pRef); console.log(homeRef); } return ( <div> <p ref={pRef}>我是段落</p> <Home ref={homeRef}/> <About/> <button onClick={() => { btnClick() }}>获取 </button> </div> ) } export default App;
可以发现两个元素对象当中都有一个 current 属性，当中保存的就是对应的元素信息，那么就下来就可以演示存储数据这么一个特点，在 useRef 创建的时候是可以传递一个数据的如下：
那么博主也跟着传递一下，然后在查看创建出来的元素是怎样的：
发现 current 属性保存的就是我们传递的初始值，然后我们可以进行使用：
function App() { const pRef = createRef(); const homeRef = useRef(18); function btnClick() { console.log(pRef); console.log(homeRef); } return ( <div> <p>{homeRef.current}</p> <p ref={pRef}>我是段落</p> <Home ref={homeRef}/> <About/> <button onClick={() => { btnClick() }}>获取 </button> </div> ) }
那么 useRef 也可以进行存储数据那么在前面所说的 state 也可以存储数据他们之间又有什么区别呢？
useState 和 useRef 的区别
- useRef 中保存的数据，除非你手动的进行修改，否则永远都不会发生变化
改造一下如上示例：
import React, {useState, useRef, useEffect} from 'react'; export default function App() { const [numState, setNumState] = useState(0); const age = useRef(numState); useEffect(() => { age.current = numState; }, [numState]); return ( <div> <p>上一次的值：{age.current}</p> <p>当前的值：{numState}</p> <button onClick={() => { setNumState(numState + 1); }}>增加 </button> </div> ) }
如上的示例就是说你如果想要知道你上一次的值就可以利用 useRef 的传参来实现，因为如果你不去修改他他是不会发生改变的，我们通过 useEffect 然后依赖于 numState 增加完成之后在重新给 age 赋值这样就可以知道我们上一次的值。
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
