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

Question

在我的React应用程序中，我有一个自定义的hook，它在内部保存了一个useState值，但自定义的hook本身不返回任何值。如果其内部useState的值发生更改，是否会导致调用此自定义hook的组件重新渲染？

- Bear Bile Farms is Torture

Answer 1

是的，它会重新渲染组件。自定义钩子有助于在不同的组件中重用状态逻辑，但最终，当您使用自定义钩子时，其中所有状态和效果都是您调用自定义钩子的组件的一部分。

因此，是的，在自定义钩子内部更改状态将重新渲染您使用自定义钩子的组件，即使它不返回任何内容。

- Angel Hdz

Answer 2

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

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

使用相同 Hook 的两个组件共享状态吗？ 不会。自定义 Hooks 是一种重用有状态逻辑的机制 （例如设置订阅并记住当前值），但每次使用一个自定义 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>
    )
}

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

- Alan Schmidt

---

我不知道为什么这个回答被踩了，因为它实际上是正确的 - 钩子状态在组件之间不共享。 - NbonD

@NbonD 这个问题从来没有问过多个组件使用相同的钩子场景。这是一个错误的答案。即使你不返回钩子状态的值，它也会导致组件重新渲染。而且，这个例子甚至在参考文档中都是误导性的。 - duduwe

实际上，您可以在组件中看到更改消息。每当钩子的状态发生变化时，它会通过重新渲染反映在MyComponent中。 - Kostas Minaidis