react useRef使用與常見問題
文章目錄
- react useRef使用與常見問題
- 1. Dom操作: useRef()
- 2. 函數組件的轉發: React.forwardRef()
- 3. 對普通值進行記憶, 類似于一個class的實例屬性
- 4. 結合useEffect,只在更新時觸發
- FAQ
1. Dom操作: useRef()
// 1. Dom操作: useRef()let app = document.querySelector('#app');let root = ReactDOM.createRoot(app);let { useState, useEffect, useRef } = React;let Welcome = (props) => {const myRef = useRef()const handleClick = () =>{myRef.current.focus()}return (<div><button onClick={handleClick}>點擊</button><input ref={myRef} type='text' /></div>);}let element = (<Welcome />);root.render(element);
2. 函數組件的轉發: React.forwardRef()
// 2. 函數組件的轉發: React.forwardRef()let app = document.querySelector('#app');let root = ReactDOM.createRoot(app);let { useState, useEffect, useRef, forwardRef } = React;let Head = forwardRef((props, ref)=> {return (<div>hello Head{/*將 ref 轉發到子組件的input上 */}<input ref={ref} type='text' /></div>)})let Welcome = (props) => {const myRef = useRef()const handleClick = () =>{// 點擊時候會觸發子組件的focus事件myRef.current.focus()}return (<div><button onClick={handleClick}>點擊</button>{/*ref 和組件關聯*/}<Head ref={myRef}></Head></div>);}let element = (<Welcome />);root.render(element);
3. 對普通值進行記憶, 類似于一個class的實例屬性
// 3. 對普通值進行記憶, 類似于一個class的實例屬性let app = document.querySelector('#app');let root = ReactDOM.createRoot(app);let { useState, useEffect, useRef } = React;let Welcome = (props) => {// 響應式數據,具有記憶功能,點擊后響應式數據加1const [num, setNum] = useState(0);// let count = 0; // 普通的count不具有記憶功能const count = useRef(0) // 可以給普通值進行記憶操作const handleClick = () =>{count.current++;console.log(count.current);setNum(num + 1)// console.log(num); // 還是之前的值}return (<div><button onClick={handleClick}>點擊</button></div>);}let element = (<Welcome />);root.render(element);
4. 結合useEffect,只在更新時觸發
// 4. 結合useEffect,只在更新時觸發let app = document.querySelector('#app');let root = ReactDOM.createRoot(app);let { useState, useEffect, useRef } = React;let Welcome = (props) => {// 響應式數據,具有記憶功能,點擊后響應式數據加1const [num, setNum] = useState(0);const isUpdate = useRef(false) useEffect(()=>{// 只在點擊時候觸發if (isUpdate.current) {console.log(num);}})const handleClick = () =>{setNum(num + 1)isUpdate.current = true// console.log(num); // 還是之前的值}return (<div><button onClick={handleClick}>點擊</button></div>);}let element = (<Welcome />);root.render(element);
FAQ
https://zh-hans.legacy.reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function
: invalid next size)
