类组件
在React类组件中，告诉我们setState 总是导致重新渲染，无论状态是否实际更改为新值。实际上，组件将重新呈现，当状态更新为同一值以前。
除非shouldComponentUpdate（）返回false，否则setState（）将始终导致重新渲染。
挂钩（功能组件）
但是，使用钩子时，文档将更新状态指定为与先前状态相同的值，不会导致（子组件）重新呈现：
摆脱状态更新
如果您将State Hook更新为与当前状态相同的值，React将在不渲染子级或激发效果的情况下纾困。（React使用Object.is比较算法。）
密切相关的问题
this.setState即使新state值与之前的值相同，类中的组件始终会导致重新渲染是否正确？setStatefrom useState仅会导致重新渲染是否正确state？state与this.setState在带有钩子的函数组件的函数内部进行设置相同？renderstatestate在render方法中进行设置，则会发生无限循环。这是因为类组件不在乎新state的与先前的相同state。它只是在每个上不断重新渲染this.setState。state在函数体内进行设置（render与类组件中的方法类似，在重新渲染时运行）将不是问题，因为当看到该组件时 …我只是在玩 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”渲染两次（滚动超过 100px 后）
"useScroll - render window.scrollY = …