[英]How to rerender component in useEffect Hook
好的,所以:
useEffect(() => {
}, [props.lang]);
每次使用 props.lang 更改時,我應該在 useEffect 中做什么來重新渲染組件?
解決方案:
我通過改變一些問題的想法來解決這個問題(我使用另一個 function 來很好地適應語言變化。
如 React 文檔中所述,將您的 useEffect 視為 componentDidMount、componentDidUpdate 和 componentWillUnmount 的混合體。
要表現得像 componentDidMount,你需要像這樣設置你的 useEffect:
useEffect(() => console.log('mounted'), []);
第一個參數是一個回調,它將基於第二個參數觸發,第二個參數是一個值數組。 如果第二個參數中的任何值發生變化,您在 useEffect 中定義的回調 function 將被觸發。
然而,在我展示的示例中,我將一個空數組作為我的第二個參數傳遞,並且永遠不會更改,因此當組件掛載時將調用一次回調 function。
那種總結了useEffect。 如果你有一個參數而不是一個空值,就像你的情況一樣:
useEffect(() => {
}, [props.lang]);
這意味着每次“props.lang”更改時,都會調用您的回調 function。 useEffect 不會真正重新渲染您的組件,除非您在可能觸發重新渲染的回調 function 中管理一些 state。
更新:
如果你想重新渲染,你的渲染 function 需要有一個 state,你正在更新你的 useEffect。
例如,在這里,渲染 function 首先顯示英語作為默認語言,在我的使用效果中,我在 3 秒后更改了該語言,因此渲染被重新渲染並開始顯示“西班牙語”。
function App() { const [lang, setLang] = useState("english"); useEffect(() => { setTimeout(() => { setLang("spanish"); }, 3000); }, []); return ( <div className="App"> <h1>Lang:</h1> <p>{lang}</p> </div> ); }
完整代碼:
添加一個虛擬 state 您可以切換以始終啟動重新渲染。
const [rerender, setRerender] = useState(false);
useEffect(()=>{
...
setRerender(!rerender);
}, []);
這將確保重新渲染,因為組件總是在 state 更改時重新渲染。
您可以隨時隨地調用setRerender(!rerender)
來啟動重新渲染。
const [state, set] = useState(0);
useEffect(() => {
fn();
},[state])
function fn() {
setTimeout((), {
set(prev => prev + 1)
}, 3000)
}
上面的代碼將每 3 秒重新渲染一次fn
function。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.