在我的React应用程序中,我有一个自定义的钩子,它在内部保存一个useState值,但是自定义钩子本身不返回任何值。如果其内部useState的值发生更改,是否会导致调用此自定义挂钩的组件重新呈现?
useState
ghhaqwfi1#
是的,它重新呈现组件。自定义钩子有助于在不同的组件中重用有状态逻辑,但最终,当你使用自定义钩子时,它内部的所有状态和效果都是你调用自定义钩子的组件的一部分。所以,是的,自定义钩子内部的状态变化重新呈现了你使用自定义钩子的组件,即使它没有返回任何东西。
omhiaaxx2#
否,它不会重新呈现组件。从documentation(https://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”消息,其中的值增加了,但是你不会看到组件中的任何更改消息。钩子的状态属于它,而且只属于它。
2条答案
按热度按时间ghhaqwfi1#
是的,它重新呈现组件。自定义钩子有助于在不同的组件中重用有状态逻辑,但最终,当你使用自定义钩子时,它内部的所有状态和效果都是你调用自定义钩子的组件的一部分。所以,是的,自定义钩子内部的状态变化重新呈现了你使用自定义钩子的组件,即使它没有返回任何东西。
omhiaaxx2#
否,它不会重新呈现组件。
从documentation(https://reactjs.org/docs/hooks-custom.html):
使用相同Hook的两个组件共享状态吗?不。自定义Hook是一种重用有状态逻辑(如设置订阅并记住当前值)的机制,但每次使用自定义Hook时,它内部的所有状态和效果都是完全隔离的。
钩示例:
使用它的示例组件:
如果你点击这个按钮,“保存”函数就会执行,你会看到“Internal saveCount value”消息,其中的值增加了,但是你不会看到组件中的任何更改消息。钩子的状态属于它,而且只属于它。