我試圖了解在使用普通 setState V/s 的另一種情況下使用功能狀態更新的情況下如何導致重新渲染功能組件的確切差異
相關代碼片段如下
案例 1：導致組件重新渲染
const onRemove = useCallback(
tickerToRemove => {
setWatchlist(watchlist.filter(ticker => ticker !== tickerToRemove));
},
[watchlist]
);
情況 2：不會導致重新渲染
const onRemove = useCallback(tickerToRemove => {
setWatchlist(watchlist =>
watchlist.filter(ticker => ticker !== tickerToRemove)
);
}, []);
可以在 上看到兩個用例的完整示例；
https://codesandbox.io/s/06c-usecallback-final-no-rerenders-bsm64?file=/src/watchlistComponent.js
https://codesandbox.io/s/06b-usecallback-usememo-ngwev?file=/src/watchlistComponent.js:961-970
更新
全文鏈接 https://medium.com/@guptagaruda/react-hooks-understanding-component-re-renders-9708ddee9928#204b
我對如何防止重新渲染子組件感到有些困惑。
文章里說
“值得慶幸的是，useState 鉤子中的 setter 函式支持一個函式式變體，它可以幫助我們解決問題。我們可以發送一個獲取當前狀態作為引數的函式，而不是使用更新的監視串列陣列呼叫 setWatchlist”
但是，我有點困惑是否因為我們使用空陣列（因為 [] 在渲染之間不會更改）而阻止了子組件的重新渲染，因為使用 useState hook 的 setter 變體而阻止了 V/s ？
uj5u.com熱心網友回復：
是否使用功能狀態更新與您所問的問題無關。您似乎在問為什么 (1) 具有依賴項的回呼會觸發重新渲染，而 (2) 具有空依賴項的回呼。
答案非常簡單。在版本 (2) 中，您從組件安裝時起提供穩定的回呼參考，從不更改，而在 (1) 中，回呼參考在依賴項發生時更改。請記住，當 state 或props更新（新的回呼參考是新的 prop 參考）或父組件重新渲染時，React 組件會重新渲染。由于onRemove道具在（1）中更新，因此會觸發重新渲染。
uj5u.com熱心網友回復：
在情況 2：具有空依賴項的 useCallback 將充當 shouldComponentUpdate Lifecycle 方法，但每次都回傳 false。由于 shouldComponentUpdate 回傳 false 組件將不會重新渲染。
情況 1：useCallback 將充當 shouldComponentUpdate 生命周期方法，但在提到的依賴項更改時回傳 true，這會使組件重新渲染。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/334454.html
標籤：javascript 反应 反应钩子 使用状态 使用回调
下一篇：無法將模式傳遞給背景顏色