如何在依赖值未发生变化的情况下触发useEffect执行？

问题原因 #

React 的 useState 默认会对新老state值做浅比较，如果两者相等则跳过state更新，自然不会触发依赖该state的useEffect执行，这就是多次赋值相同值时effect不再触发的核心原因。

可行解决方案 #

方案1：使用递增计数器作为触发依赖

维护一个单独的计数器作为useEffect的依赖项，每次需要触发时将计数器加1，保证依赖项一定变化，实际业务值可以存在useRef中避免不必要的渲染：

import React, { useState, useEffect, useRef } from "react";

function App() {
    const [effectTrigger, setEffectTrigger] = useState(0);
    // 实际业务值存ref，更新不会触发重渲染
    const dependency = useRef(0);

    useEffect(() => {
        console.log("Triggered!");
        console.log("当前dependency值：", dependency.current);
    }, [effectTrigger]);

    return (
        <div>
            <div onMouseDown={() => {
                dependency.current = 1;
                // 计数器自增，保证依赖变化
                setEffectTrigger(prev => prev + 1);
            }}>
                set dependency to 1
            </div>
        </div>
    );
}

export default App;

适用场景：依赖值不需要参与页面渲染的场景，性能开销最低。

方案2：将依赖值包裹为引用类型

把基础类型的依赖值包裹在对象/数组这类引用类型中，每次赋值都生成新的引用对象，绕过浅比较的相等判断：

import React, { useState, useEffect } from "react";

function App() {
    // 值存在对象的value字段中
    const [dependency, setDependency] = useState({ value: 0 });

    useEffect(() => {
        console.log("Triggered!");
        console.log("当前dependency值：", dependency.value);
    }, [dependency]);

    return (
        <div>
            <div onMouseDown={() => setDependency({ value: 1 })}>
                set dependency to 1
            </div>
        </div>
    );
}

适用场景：依赖值需要参与页面渲染的场景，写法简单易维护。

内容的提问来源于stack exchange，提问作者ZenBerry