如果自定义钩子内部的状态发生变化，组件会重新渲染吗？

Question

在我的 React 应用程序中，我有一个自定义定义的钩子，它在内部保存一个

useState

值，但自定义钩子本身不返回任何值。

如果其内部

useState

的值发生变化，是否会导致调用此自定义钩子的组件重新渲染？

Answer 1

是的，它会重新渲染组件。自定义挂钩有助于在不同组件中重用有状态逻辑，但最终，当您使用自定义挂钩时，其中的所有状态和效果都是您调用自定义挂钩的组件的一部分。 所以，是的，自定义挂钩内的状态更改会重新呈现您使用自定义挂钩的组件，即使这不会返回任何内容。

Answer 2

是的，使用自定义钩子的组件将会重新渲染。发生这种情况是因为自定义挂钩管理的状态与组件的纤程节点相关联。当自定义钩子内的状态发生变化时，React 会更新 Fiber 节点中的状态，从而触发组件的重新渲染。这确保了 UI 反映更新后的状态，即使该状态不是由钩子直接返回的。

Answer 3

不，它不会重新渲染组件。

来自文档（https://reactjs.org/docs/hooks-custom.html）：

使用同一个 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>
    )
}

如果单击该按钮，将执行“保存”功能，并且您将看到带有递增值的“内部保存计数值”消息，但您不会在组件中看到任何更改消息。钩子的状态属于它，并且只属于它。