ReactJS 使用 useState 双重渲染布尔状态

Question

我只是在玩 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

Answer 1

如果您在单击处理程序 setState 上尝试 simple code 并且如果您单击两次并且在每个更新状态中具有相同的值，则组件再次重​​新渲染。 正如react doc 所说：

如果您将 State Hook 更新为与当前状态相同的值，React 将退出而不渲染子级或触发效果。 （React 使用 Object.is 比较算法。）

请注意，React 在退出之前可能仍需要再次渲染该特定组件。这不应该是一个问题，因为 React 不会不必要地“深入”到树中。如果您在渲染时进行昂贵的计算，您可以使用 useMemo 对其进行优化。

我希望this post 和github discussion 的回答能帮助您理解为什么会发生这种情况

还有其他相关主题，例如 this post 和 this one