亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將 useEffect 與 useLocation 一起使用

將 useEffect 與 useLocation 一起使用

慕的地10843 2024-01-18 15:48:22
我想知道使用(或不使用)useEffect 更新 useLocation 之間的最大區別是什么。我通常發現人們在 useEffect 中設置 useLocation 來在 URL 路徑發生變化時更新狀態,但我發現我不需要這樣做來更新位置。const NavBar = () => {  const location = useLocation();  const [currentPath, setCurrentPath] = useState('')  const location = useLocation();  console.log('pathname:', location.pathname)   useEffect(() => {     setCurrentPath(location.pathname);   }, [location]);console.log('currentPath:', currentPath)...}Returnspathname: /results:CancercurrentPath: /results:Cancer我的意思是,我發現的唯一區別是,使用 useEffect 時,返回將在組件安裝后發生。我正在嘗試了解成為更好的程序員的最佳實踐。
查看完整描述

1 回答

?
偶然的你

TA貢獻1841條經驗 獲得超3個贊

此處的原因useEffect是因為您正在設置state效果內。如果您刪除useEffect并執行以下操作:


const location = useLocation();

const [currentPath, setCurrentPath] = useState('');


setCurrentPath(location.pathname);

您可能會看到此錯誤:


重新渲染次數過多。React 限制渲染數量以防止無限循環。


這是因為它setCurrentPath在每個渲染上運行并導致新的渲染,從而導致無限循環。


useEffectdeps允許您在未更改時選擇不執行某些操作。這里setCurrentPath僅當location更改時才調用。


但更廣泛的一點是,您通常不需要在組件狀態中“緩存”位置狀態。已經是陷入困境的狀態了useLocation。只需閱讀并使用它,不要存儲它。


查看完整回答
反對 回復 2024-01-18
  • 1 回答
  • 0 關注
  • 121 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號