Javascript react如何在useCallback中保持变量值？ const{useState，useCallback}=React； 设globalValue=0； 常量组件A=（{propValue}）=>{ const[sum，setSum]=使用状态（propValue）； const[stateValue，setStateValue]=useState（0）； const onClick=useCallback（（）=>{ 日志（propValue、stateValue、globalValue）； 设置值（propValue+stateValue+globalValue）； }, []); 返回(

状态值为{stateValue}

Sum是{Sum}

setStateValue（stateValue+1）}> 设置状态值 全局值+=1}> 设置全局值 求和 ); }; 常量父项=（）=>{ 常量[propValue，setPropValue]=useState（0）； 返回( 属性值为{propValue}

setPropValue（propValue+1）}> 设定值 ); }; 如果

ComponentA

中

useCallback

的依赖项列表设置为

[]

，则在执行

控制台.log

时，无论当前

propValue

和

stateValue

是什么，它们都将始终是

0

。但是

globalValue

将始终使用最新版本。当我检查

propValue

和

stateValue

的

\uuuu proto\uuuu

时，它们都只是原语类型

useCallback

hook如何保持变量的原始值？如果变量未在当前范围内定义，它将查找其父变量并使用其中的值（如

globalValue

），这难道不应该遵守这一规则吗

---

我知道这就是

useCallback/usemo

的要点，但这是如何实现的

我在这个博客上找到了答案

下面是useCallback的模拟代码

const { useState, useCallback } = React;
let globalValue = 0;
const ComponentA = ({ propValue }) => {
    const [sum, setSum] = useState(propValue);
    const [stateValue, setStateValue] = useState(0);
    const onClick = useCallback(() => {
        console.log(propValue, stateValue, globalValue);
        setSum(propValue + stateValue + globalValue);
    }, []);
    return (
        <div>
            <p>State value is {stateValue}</p>
            <p>Sum is {sum}</p>
            <button onClick={() => setStateValue(stateValue + 1)}>
                Set stateValue
              </button>
            <button onClick={() => globalValue += 1}>
                Set globalValue
            </button>
            <button onClick={onClick}>
                Get Sum
            </button>
        </div>
    );
};
const Parent = () => {
    const [propValue, setPropValue] = useState(0);

    return (
        <div>
            <p>Prop value is {propValue}</p>
            <button onClick={() => setPropValue(propValue + 1)}>
                Set PropValue
            </button>
            <ComponentA propValue={propValue} />
        </div>
    );
};

---

结束了。

(function () {
    const ReactDomTree = {};
    const memo = {};
    const getButtonElement = () => { return ReactDomTree.buttonA };
    function useMemo(create) {
        if (!memo.result) {
            memo.result = create();
        }

        return memo.result;
    };

    const useCallback = function (callback) {
        return useMemo(() => callback);
    }


    function component() {
        let propValue = Math.floor(Math.random() * 100); // mimic prop update
        let stateValue = Math.floor(Math.random() * 100); // mimic state update
        console.log('component render', propValue, stateValue);

        const onClick = useCallback(() => {
            console.log('onclick', propValue, stateValue);
        });

        if (!ReactDomTree.buttonA) {
            ReactDomTree.buttonA = {};
            ReactDomTree.buttonA.onClick = onClick;
        }
    }

    component(); // component render
    let button = getButtonElement()
    button.onClick();
    component(); // component render
    button = getButtonElement()
    button.onClick() // This log result is same as the previous one

})();