javascript - 如何让自定义钩子(Hook)响应状态变化？

Question

我有一个处理特定状态变量的自定义 Hook 。

每当您更改状态时，它都不会立即更新，因此我必须使用 useEffect 订阅它。

但是，在 useEffect 中调用自定义钩子(Hook)是绝对不可能的。

如何让自定义 Hook 使用状态变量执行任何操作？

Answer 1

您不能(不应该)在 useEffect 内部调用自定义 Hook ，但您可以在自定义 Hook 内部使用 useEffect:

const useMyHook = function( someState ){
    useEffect( function(){
        // do what the hook should do
    }, [ someState ]);
};

如果当其他内容发生变化时 Hook 也应该更新，您也可以传递它:

const useMyHook = function( someState, someDependency ){
    useEffect( function(){
        // do what the hook should do
    }, [ someState, someDependency ]);
};

我建议对依赖项使用数组，这样它的工作方式类似于useEffect:

const useMyHook = function( label, dependencies ){

    const [ value, setValue ] = useState(0);

    useEffect( function(){
        setValue( value + 1 );
    }, [ label, ...dependencies ]);

    return label + ': ' + value;
};

// ...

const value = useMyHook('counter', [ dependentValue, otherDependentValue ]);