javascript - ReactJS 使用 useState 双重渲染 bool 状态

Question

我只是在玩 ReactJS 并试图用 useState 钩子(Hook)找出一些奇怪的行为。
如果状态设置为与之前相同的原始值( bool 值)，则不应重新渲染组件

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}
}

这是控制台输出 - 你可以看到组件和钩子(Hook)都用“true”渲染了两次(滚动超过 100px 后)

"useScroll - render window.scrollY = 101 isPositionCrossed = ", true
"useScroll - render window.scrollY = 103 isPositionCrossed = ", true

Answer 1

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

If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects. (React uses the Object.is comparison algorithm.)

Note that React may still need to render that specific component again before bailing out. That shouldn’t be a concern because React won’t unnecessarily go “deeper” into the tree. If you’re doing expensive calculations while rendering, you can optimize them with useMemo.

我希望 this post的答案这个 github discussion帮助您了解为什么会发生这种情况
还有其他相关主题，如 this post和 this one