1.什么是useRef Hook?
useRef就是createRef的Hook版本用來獲取元素, 只不過比createRef更強(qiáng)大一點
createRef只能獲取普通元素和類元素，并且只能獲取到類組件的實例對象面哥，不能拿到函數(shù)式組件
import React, {createRef, useRef} 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;
import React, {createRef, useRef} 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();
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;
兩種方法都能拿到ref,結(jié)果如下：
createRef.png
createRef和useRef
- useState和useRef區(qū)別:
useRef中保存的數(shù)據(jù), 除非手動修改, 否則永遠(yuǎn)都不會發(fā)生變化
const age = useRef(18);
如果說useRef也可以保存數(shù)據(jù)的話那么為什么還要有useState呢纱烘？
function App() {
const pRef = createRef();
const homeRef = useRef();
function btnClick() {
console.log(pRef); // {current: p}
console.log(homeRef); // {current: Home}
}
const [numState, setNumState] = useState(0);
// const age = useRef(18); // {current: 18}
const age = useRef(numState); // {current: 0}
useEffect(()=>{
age.current = numState;
}, [numState]);
return (
<div>
<p>上一次的值: {age.current}</p>
<p>當(dāng)前的值 :{numState}</p>
<button onClick={()=>{setNumState(numState + 1)}}>增加</button>
</div>
)
}
export default App;
總結(jié)一下：
useRef可以獲取元素季春，可以保存數(shù)據(jù)
和createRef的區(qū)別是可以保存數(shù)據(jù)
和useState的區(qū)別是：useRef中保存的數(shù)據(jù), 除非手動修改, 否則永遠(yuǎn)都不會發(fā)生變化
