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

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

如果不指定依賴項,useEffect() 有什么意義

如果不指定依賴項,useEffect() 有什么意義

收到一只叮咚 2023-06-09 14:41:02
useEffect我在一個功能組件中使用反應鉤子,并且想知道當你不指定依賴項時它的用途是什么。我知道它用于副作用的文檔狀態,但我的問題是為什么這些副作用不能只在功能組件內使用純 JS 運行?作為一個非?;镜氖纠?,我正在使用以下代碼:import {useEffect, useState} from 'react'function Child () {  const [clickCount, updateCount] = useState(0)  console.log('Run outside of useEffect')  useEffect(()=>{    console.log("Run inside of useEffect")  })  return (    <button onClick = {() => updateCount(clickCount+1)}> Child COmponent </button>  )}export default Child正如您所期望的那樣,它基本上只是一個普通的 JS 函數,在每次由單擊按鈕引起的重新渲染時,console.log都會執行這兩個函數。useEffect我理解為什么您可能想在如下情況下使用,您只想useEffect在特定更改時運行:import {useEffect, useState} from 'react'function Child () {  const [clickCount, updateCount] = useState(0)  console.log('Run outside of useEffect')  //this now only runs when `someVariable` changes  useEffect(()=>{        console.log("Run inside of useEffect")  }, [someVariable])  return (    <button onClick = {() => updateCount(clickCount+1)}> Child COmponent </button>  )}export default ChilduseEffect但這引出了一個問題,除非您將依賴矩陣指定為第二個參數,否則using 有什么意義?副作用不能只使用普通 JS 正常運行嗎?
查看完整描述

2 回答

?
蝴蝶不菲

TA貢獻1810條經驗 獲得超4個贊

從文檔:

預定的效果useEffect不會阻止瀏覽器更新屏幕。這會讓您的應用感覺響應更快。大多數效果不需要同步發生。

鉤子內的代碼useEffect在 DOM 更新后運行。這就是區別。

例子:

function App() {


? let [hi, setHi] = React.useState(false);

? let [inEffect, setInEffect] = React.useState(true);

? let msg = inEffect ? "useEffect (DOM will be updated immediately)" : "functional component (it will block DOM update)";

??

? return (

? ? <React.Fragment>

? ? ? <p>

? ? ? ? Long-running code is in {msg} {" "}

? ? ? ? <button onClick={() => (setInEffect(!inEffect), setHi(false))}>switch</button>

? ? ? </p>

? ? ? <button onClick={() => setHi(true)}>Say Hi</button>

? ? ? { hi ? <Hi {...{inEffect}}/> : null }

? ? </React.Fragment>

? );

}


function Hi({inEffect}) {

? !inEffect && block();

? React.useEffect(() => inEffect && block());

? return <h1>Hi!</h1>

}


function block(time = 2000) {

? const now = Date.now();

? while(now + time > Date.now());

}



ReactDOM.render(<App/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>


查看完整回答
反對 回復 2023-06-09
?
米琪卡哇伊

TA貢獻1998條經驗 獲得超6個贊

除非您將依賴矩陣指定為第二個參數,否則使用 useEffect 有什么意義?

指定依賴數組是一種優化,如果某些值在組件的不同渲染之間沒有改變,則告訴 React 跳過執行效果。

副作用不能只使用普通 JS 正常運行嗎?

與鉤子內部的效果相比,在功能組件內部的頂層執行的效果以不同的方式執行useEffect。

當效果在useEffect:

  • 它們在瀏覽器繪制屏幕后執行,即在 React 將更改應用到 DOM 后。

  • 在再次運行效果之前,useEffect可以運行清理功能,如果提供了清理功能。

  • 指定依賴數組將允許您在每次重新渲染組件后跳過運行效果。

  • 省略數組可能會導致無限重新渲染。

由于上述幾點,您總是希望在鉤子內部執行副作用useEffect。

就功能組件中頂層代碼的效果而言,考慮以下幾點:

  • 將在用戶看到屏幕上的任何內容之前執行效果,即效果將在 React 更新 DOM 之前執行。

  • 在再次運行效果之前,您將沒有可以執行的清理機制。


查看完整回答
反對 回復 2023-06-09
  • 2 回答
  • 0 關注
  • 170 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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