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>

TA貢獻1998條經驗 獲得超6個贊
除非您將依賴矩陣指定為第二個參數,否則使用 useEffect 有什么意義?
指定依賴數組是一種優化,如果某些值在組件的不同渲染之間沒有改變,則告訴 React 跳過執行效果。
副作用不能只使用普通 JS 正常運行嗎?
與鉤子內部的效果相比,在功能組件內部的頂層執行的效果以不同的方式執行useEffect
。
當效果在useEffect
:
它們在瀏覽器繪制屏幕后執行,即在 React 將更改應用到 DOM 后。
在再次運行效果之前,
useEffect
可以運行清理功能,如果提供了清理功能。指定依賴數組將允許您在每次重新渲染組件后跳過運行效果。
省略數組可能會導致無限重新渲染。
由于上述幾點,您總是希望在鉤子內部執行副作用useEffect
。
就功能組件中頂層代碼的效果而言,考慮以下幾點:
將在用戶看到屏幕上的任何內容之前執行效果,即效果將在 React 更新 DOM 之前執行。
在再次運行效果之前,您將沒有可以執行的清理機制。
添加回答
舉報