当您使用 react 并拥有同一组件的多个实例时，管理状态可能会变得很棘手。根据组件需要交互的方式，您需要以不同的方式处理状态。这是我发现效果很好的方法。
独立实例：将状态保留在组件内部
如果您的组件不需要相互通信，最好将它们的状态保留在组件内。这样，每个实例都有自己的状态，其中一个实例的更改不会影响其他实例。
function counter() { const [count, setcount] = usestate(0); return ( count: {count}
);}// usage // instance 1 // instance 2
在这里，每个 counter 组件都会跟踪自己的计数。因此，如果您单击一个计数器中的按钮，则不会更改另一个计数器中的计数。
依赖实例：管理父组件中的状态
但是，如果组件需要共享某些状态或以协调的方式工作，最好将状态移至父组件。父级可以管理共享状态并将其作为 props 传递下来。这可确保所有实例保持同步并顺利协同工作。
function Parent() { const [sharedCount, setSharedCount] = useState(0); return ( Total Count: {sharedCount}
);}function Counter({ count, setCount }) { return ( Count: {count}
);}
这种方法之所以有效，是因为当状态位于父组件中时，对该状态的任何更新都会触发所有实例的重新渲染，确保它们都显示最新的 ui。如果将状态单独保存在每个实例中，则只有状态发生更改的实例才会重新渲染，从而导致实例之间的 ui 不一致。
我的项目中的示例
我在构建手风琴组件时发现了这一点。这是我自己工作中的两个例子：
慧中标AI标书
慧中标AI标书是一款AI智能辅助写标书工具。
120 查看详情
独立手风琴实例：示例。在此设置中，每个手风琴实例独立工作。
依赖的手风琴实例：示例。在此版本中，所有手风琴实例相互依赖并保持同步。
快速回顾
如果组件单独工作，请将状态保存在每个组件内。
如果他们需要共享状态或以协调的方式一起工作，请在父级中管理状态。
在构建这些手风琴示例时，这种方法对我产生了很大的影响。希望对你也有帮助！
以上就是在 React 中管理同一组件的多个实例中的状态的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/458627.html
微信扫一扫 
支付宝扫一扫 
