useState 和 useEffect 的區別

Question

我使用 useState 而不是 useEffect，它可以很好地顯示數據（為什么？）

React.useState(() =>getMovies(), [])

注意：我添加了 console.log 並且得到了相同的結果

Answer 1

當 function 被傳遞給useState時，這是向 React 發出使用惰性初始化的信號——function 將僅在組件掛載時被調用以計算初始值。

如果可以同步計算/檢索要放入 state 的值，這可能是最好的設計模式 - 它很短，不需要您稍后區分 state 值是未定義的還是填充的。

const [stateValue, setStateValue] = useState(calculateExpensiveInitialStateValue);

使用useEffect的時間是當無法同步計算要填充的值時，在這種情況下，最好的方法是同時使用useState （用於狀態）和useEffect （表示您要運行 function 來檢索state 值只有一次）。

雖然理論上你可以有一條線就像

React.useState(() =>getMovies(), [])

這很令人困惑，因為

useEffect更適合該任務，因為它沒有返回值（不像useState ），而且更靈活，因為它確實接受依賴項數組。 useEffect更清楚地向代碼讀者指示“此回調應僅在依賴項數組更改時運行”。