我只是在玩 ReactJS 并試圖通過 useState 鉤子找出一些奇怪的行為。
如果狀態設定為與之前相同的原始值（布林值），則不應重新渲染組件
const useScroll = ({positionToCross = 10}) => {
const window = useWindow();
const [isPositionCrossed, setIsPositionCrossed] = useState(window.scrollY > positionToCross);
useEffect(() => {
const onScroll = function (e) {
window.requestAnimationFrame(function () {
const lastKnownScrollPosition = window.scrollY;
setIsPositionCrossed(lastKnownScrollPosition > positionToCross);
});
}
window.addEventListener('scroll', onScroll);
return () => {
window.removeEventListener("scroll", onScroll)
}
}, []);
console.log(`useScroll - render window.scrollY = ${window.scrollY.toFixed(0)} isPositionCrossed = `, isPositionCrossed)
return {isPositionCrossed}
}
這是控制臺輸出 - 您可以看到組件和鉤子都以“true”呈現兩次（滾動超過 100 像素后）
"useScroll - render window.scrollY = 101 isPositionCrossed = ", true
"useScroll - render window.scrollY = 103 isPositionCrossed = ", true
uj5u.com熱心網友回復：
如果您嘗試單擊處理程式 setState 上的簡單代碼，并且如果您單擊兩次并且在每個更新狀態中使用相同的值再次重新渲染組件。正如反應檔案所說：
如果您將 State Hook 更新為與當前狀態相同的值，React 將退出而不渲染子項或觸發效果。（React 使用 Object.is 比較演算法。）
請注意，在退出之前，React 可能仍需要再次渲染該特定組件。這不應該是一個問題，因為 React 不會不必要地“深入”到樹中。如果您在渲染時進行昂貴的計算，您可以使用 useMemo 優化它們。
我希望這篇文章和這個github 討論的答案能 幫助你理解為什么會發生這種情況
還有另一個相關的主題，比如這篇文章 和這個
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/399853.html
標籤：javascript 反应 反应钩子