使用状态保留范围

Question

组件A，B和C是功能组件。如果 someState 为真并且访问了组件 A，则 useState 变量在返回此模块时是否会保留其值？

来自 A 的返回在此主模块中通过将回调函数传递给 A 来处理，该函数重置了某个状态。

const [someState, setSomeState] = useState()
const [anotherState, setAnotherSate] = useState()
...
const handleRemoveDetail = () => {
someState(0);
};
return (
{someState onRemoveDetail={handleRemoveDetail} ? (
<A />
) : (
<div>
<B />
<C />
</div>
)}
)

Answer 1

通过有条件地呈现组件，您可以在条件更改时挂载和卸载它。所以要回答你的问题，不，它不会保留其状态值。状态在重新渲染期间保留，但在组件卸载时丢失。

但是，如果状态由父组件管理，那么我们谈论的是组件 A 的props，而不是state。组件 A 的 props 每次挂载和卸载时都是相同的，只要父组件没有更改它们。

另外，这个语法不正确，回调应该像这样提供：

return (
{someState ? (
<A onRemoveDetail={handleRemoveDetail} />
) : (
<div>
<B />
<C />
</div>
)}
)

Answer 2

A

没有被"访问"，它是由其父级呈现的。someState变量属于父组件，只要保留父组件，它就可用。如果将setSomeState回调传递给任何子项并从那里调用它，则父项中的状态将更新。