在 React 中管理同一组件的多个实例中的状态

百变鹏仔 3天前 #JavaScript

文章标签多个

当您使用 react 并拥有同一组件的多个实例时，管理状态可能会变得很棘手。根据组件需要交互的方式，您需要以不同的方式处理状态。这是我发现效果很好的方法。

独立实例：将状态保留在组件内部

如果您的组件不需要相互通信，最好将它们的状态保留在组件内。这样，每个实例都有自己的状态，其中一个实例的更改不会影响其他实例。

function counter() {  const [count, setcount] = usestate(0);  return (    <div>      <p>count: {count}</p>      <button onclick="{()"> setcount(count + 1)}&gt;increment</button>    </div>  );}// usage<counter></counter> // instance 1<counter></counter> // instance 2

在这里，每个 counter 组件都会跟踪自己的计数。因此，如果您单击一个计数器中的按钮，则不会更改另一个计数器中的计数。

依赖实例：管理父组件中的状态

但是，如果组件需要共享某些状态或以协调的方式工作，最好将状态移至父组件。父级可以管理共享状态并将其作为 props 传递下来。这可确保所有实例保持同步并顺利协同工作。

function Parent() {  const [sharedCount, setSharedCount] = useState(0);  return (    <div>      <p>Total Count: {sharedCount}</p>      <counter count="{sharedCount}" setcount="{setSharedCount}"></counter><counter count="{sharedCount}" setcount="{setSharedCount}"></counter></div>  );}function Counter({ count, setCount }) {  return (    <div>      <p>Count: {count}</p>      <button onclick="{()"> setCount(count + 1)}&gt;Increment</button>    </div>  );}

这种方法之所以有效，是因为当状态位于父组件中时，对该状态的任何更新都会触发所有实例的重新渲染，确保它们都显示最新的 ui。如果将状态单独保存在每个实例中，则只有状态发生更改的实例才会重新渲染，从而导致实例之间的 ui 不一致。

我的项目中的示例

我在构建手风琴组件时发现了这一点。这是我自己工作中的两个例子：

快速回顾

在构建这些手风琴示例时，这种方法对我产生了很大的影响。希望对你也有帮助！

文章推荐

在 React 中管理同一组件的多个实例中的状态

独立实例：将状态保留在组件内部

依赖实例：管理父组件中的状态

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？