如何将React setState回调优雅转换为useEffect Hook？

我能实现一个包含“A”“B”两个按钮的类组件：点击按钮A时设置状态变量，之后执行actionA；点击按钮B时设置同一个状态变量，之后执行actionB。这个逻辑核心依赖setState的第二个参数——状态更新完成后的回调函数。

但改成函数组件时遇到两个问题：

• 把回调逻辑移到useEffect后，没法区分状态更新是哪个按钮触发的；
• useEffect仅在状态实际变更时才执行，比如重复设置相同值时会跳过，导致回调不触发。

示例代码如下：

import React from 'react';
import './styles.css';

// 按钮点击后、状态更新完成需执行的操作
const actionA = () => {
    console.log('button A thing');
};
const actionB = () => {
    console.log('button B thing');
};

const App = () => {
    return (
        <>
            <ClassVersion />
            <FunctionVersion />
        </>
    );
};

// 类组件版本
class ClassVersion extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            x: 0,
        };
    }

    render = () => {
        return (
            <div className='box'>
                Class Version
                <br />
                <button
                    type='button'
                    onClick={() => {
                        this.setState({ x: 1 }, () => {
                            actionA();
                        });
                    }}
                >
                    A
                </button>
                <button
                    type='button'
                    onClick={() => {
                        this.setState({ x: 2 }, () => {
                            actionB();
                        });
                    }}
                >
                    B
                </button>
                State: {this.state.x}
            </div>
        );
    };
}

// 函数组件版本（存在问题）
const FunctionVersion = () => {
    const [x, setX] = React.useState(0);

    React.useEffect(() => {
        // 无法区分是按钮A还是B触发的状态更新
        if (/* 由按钮A触发 */ true) {
            actionA();
        }
        if (/* 由按钮B触发 */ true) {
            actionB();
        }
        // 状态未变更时，effect不会执行，回调也被跳过
    }, [x]);

    return (
        <div className='box'>
            Function Version
            <br />
            <button
                type='button'
                onClick={() => {
                    setX(1);
                    // 不能直接在这里调用actionA，状态还没更新完成
                }}
            >
                A
            </button>
            <button
                type='button'
                onClick={() => {
                    setX(2);
                    // 不能直接在这里调用actionB，状态还没更新完成
                }}
            >
                B
            </button>
            State: {x}
        </div>
    );
};

export default App;

我想到两种解决方案，但不想给状态变量加额外标记：

1. 把x改成{value: number; who: string}类型，调用setX({value: 1, who: 'A'})，effect里通过who识别触发源，且每次都能触发effect（因为是新对象）；
2. 把x改成{value: number; callback: () => void}类型，调用setX({value: 1, callback: actionA})，effect里执行x.callback()。

这两种方案都能用，但我不想为状态加额外标记，想问：我的方案是否合理？有没有无需标记状态的更优方法？

你的现有方案是否合理？ #

这两种方案是可行的，但确实会让状态结构变得冗余——尤其是当action逻辑和状态本身无关时，把触发源或回调塞进状态里，违背了「状态仅存储UI所需数据」的原则。如果只是临时解决问题可以用，但长期来看不够优雅。

无需标记状态的更优方法 #

方法1：使用useRef追踪触发动作 #

用useRef存储当前点击的按钮标识，在点击时先更新ref，再设置状态，最后在useEffect里根据ref的值执行对应action：

const FunctionVersion = () => {
    const [x, setX] = React.useState(0);
    const triggerRef = React.useRef(null); // 存储触发按钮的标识

    React.useEffect(() => {
        if (triggerRef.current === 'A') {
            actionA();
        } else if (triggerRef.current === 'B') {
            actionB();
        }
        triggerRef.current = null; // 执行完后重置，避免重复触发
    }, [x]);

    return (
        <div className='box'>
            Function Version
            <br />
            <button
                type='button'
                onClick={() => {
                    triggerRef.current = 'A';
                    setX(1);
                }}
            >
                A
            </button>
            <button
                type='button'
                onClick={() => {
                    triggerRef.current = 'B';
                    setX(2);
                }}
            >
                B
            </button>
            State: {x}
        </div>
    );
};

这种方法不会污染状态，triggerRef仅作为临时追踪工具，执行完action后重置即可。但要注意：如果多次快速点击，ref可能被覆盖，不过一般业务场景下足够用。

方法2：自定义带回调的useState Hook #

模拟类组件setState的回调功能，封装一个自定义Hook，这样就能在设置状态后直接传入回调，无需依赖useEffect：

const useStateWithCallback = (initialState) => {
    const [state, setState] = React.useState(initialState);
    const callbackRef = React.useRef(null);

    const setStateWithCallback = (newState, callback) => {
        callbackRef.current = callback;
        setState(newState);
    };

    React.useEffect(() => {
        if (callbackRef.current) {
            callbackRef.current();
            callbackRef.current = null;
        }
    }, [state]);

    return [state, setStateWithCallback];
};

// 使用这个自定义Hook
const FunctionVersion = () => {
    const [x, setX] = useStateWithCallback(0);

    return (
        <div className='box'>
            Function Version
            <br />
            <button
                type='button'
                onClick={() => {
                    setX(1, actionA); // 直接传入回调
                }}
            >
                A
            </button>
            <button
                type='button'
                onClick={() => {
                    setX(2, actionB); // 直接传入回调
                }}
            >
                B
            </button>
            State: {x}
        </div>
    );
};

这个方案最贴近类组件的写法，完全不需要修改原状态结构，还能复用带回调的状态设置逻辑，是最推荐的方式。

方法3：使用setTimeout（不推荐，仅作补充） #

利用React状态更新是异步的特性，用setTimeout把action放到下一轮事件循环执行，此时状态已经更新完成：

const FunctionVersion = () => {
    const [x, setX] = React.useState(0);

    return (
        <div className='box'>
            Function Version
            <br />
            <button
                type='button'
                onClick={() => {
                    setX(1);
                    setTimeout(actionA, 0);
                }}
            >
                A
            </button>
            <button
                type='button'
                onClick={() => {
                    setX(2);
                    setTimeout(actionB, 0);
                }}
            >
                B
            </button>
            State: {x}
        </div>
    );
};

这种方法虽然简单，但依赖事件循环的时机，不够可靠——比如在并发渲染模式下可能出问题，不建议在正式项目中使用。

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