为什么 useEffect 钩子及其依赖项在第一个组件渲染后运行

Question

我已将 useEffect 配置为仅在其依赖项更改时运行：

useEffect(() => {
        localStorage.setItem("cart", JSON.stringify(cart));

    }, [cart])

但是当组件第一次渲染时。useEffect 钩子为什么会调用？

Answer 1

这就是useEffect工作原理。无论依赖项数组是什么，所有回调都会在组件安装时运行- 无论其中的值是什么，无论它是否为空，无论它是否存在。

如果您想避免这种情况，您可以检查购物车是否等于 ( ===) 购物车的初始值。

const [cart, setCart] = useState(initialCart);
useEffect(() => {
    if (cart !== initialCart) {
        localStorage.setItem("cart", JSON.stringify(cart));
    }
}, [cart]);

在直接比较可能产生误报的情况下 - 例如状态是否是基元而不是数组，因此尽管===不在初始渲染中，但可能是初始值 - 您将需要另一种方法来检查组件是否是安装与否，例如通过状态isMounted或引用。

Answer 2

我已经使用这个来防止安装：

let storageRef = useRef(true);
    useEffect(() => {
        if (!storageRef.current) {
            localStorage.setItem("cart", JSON.stringify(cart));
        }
        return () => { storageRef.current = false; }

    }, [cart])

这是不是一个好主意？