reactjs 如果自定义挂钩内的状态发生更改,组件是否会重新呈现?

4szc88ey  于 2022-11-04  发布在  React
关注(0)|答案(2)|浏览(168)

在我的React应用程序中,我有一个自定义的钩子,它在内部保存一个useState值,但是自定义钩子本身不返回任何值。
如果其内部useState的值发生更改,是否会导致调用此自定义挂钩的组件重新呈现?

ghhaqwfi

ghhaqwfi1#

是的,它重新呈现组件。自定义钩子有助于在不同的组件中重用有状态逻辑,但最终,当你使用自定义钩子时,它内部的所有状态和效果都是你调用自定义钩子的组件的一部分。所以,是的,自定义钩子内部的状态变化重新呈现了你使用自定义钩子的组件,即使它没有返回任何东西。

omhiaaxx

omhiaaxx2#

否,它不会重新呈现组件。
documentationhttps://reactjs.org/docs/hooks-custom.html):
使用相同Hook的两个组件共享状态吗?不。自定义Hook是一种重用有状态逻辑(如设置订阅并记住当前值)的机制,但每次使用自定义Hook时,它内部的所有状态和效果都是完全隔离的。
钩示例:

export function useExample () {
    const [saveCount,setSaveCount] = useState(0);

    console.log('Internal saveCount value',saveCount);

    const save=()=>{
        return fetch(blah, blah, blah).then((result)=>{
            setSaveCount((prev)=>{
                return prev+1;
            });
            return result;
        });
    }

    return {
        saveCount:saveCount,
        save:save
    }
}

使用它的示例组件:

export function MyComponent (props) {
    const { saveCount, save } = useExample();

    console.log('External saveCount value',saveCount);

    const onClick=()=>{
        save();
    }

    useEffect(()=>{
        console.log('Effect saveCount value',saveCount);
    },[saveCount]);

    return (
        <Button onClick={onClick}>Blah, blah, blah</Button>
    )
}

如果你点击这个按钮,“保存”函数就会执行,你会看到“Internal saveCount value”消息,其中的值增加了,但是你不会看到组件中的任何更改消息。钩子的状态属于它,而且只属于它。

相关问题