reactjs - 从 OOP 到 ReactJs：为什么我应该从组件中删除本地状态并将其移动到其父级？

我会说我对很多 OOP 语言都有很好的经验。大多数使用Java。我已经使用 Spring Boot 进行了全栈开发，现在我正在尝试学习 React。

我对这一切的看法是，也许我已经习惯了 OOP 语言，所以有些“设计哲学”是我无法理解的。

我从这个教程视频开始：

这非常好而且很清楚，但我在某一部分特别有问题：

1:47:55删除本地状态

总结视频，他制作了一个名为 Counters 的组件，其中包含 N 个名为 Counter 的组件。这个组件计数器只是一个数字和一个按钮，每次按下该值应该增加 1。

最初，此值作为状态存储在 Counter 组件中。以 OOP 方式进行思考是有意义的。但是，在视频的那一章中，他建议删除该状态并在父组件 Counters 中保留该值。

每次按下“INCREASE”按钮时，都会在父组件中调用 Increment。该值存储在计数器中。不是计数器。

现在，我的问题是：为什么不在 Counter 组件中保持 VALUE 状态，并且每次增加，通知父组件发生这种情况？

这种设计哲学怎么称呼？有任何教程/书籍/视频可以更好地为来自 OOP 背景的人解释这一点吗？

抱歉，这是一个愚蠢的问题。谢谢！

标签： reactjs

这样做的目标是拥有“单一事实来源”。换句话说，如果这块状态只保存在一个地方，那么不同版本之间是不可能发生冲突的，因为不同的版本是不存在的。这反过来意味着您不必花费任何精力或代码来尝试保持状态彼此同步。

现在原则上您可能会考虑让子组件成为唯一的事实来源。但是react的设计方式，props总是从组件树的顶部流到底部。父组件将 props 传递给子组件，反之亦然，因此 react 使得 state 可以非常方便地存在于父组件中，然后传递给子组件。

正如您所提到的，孩子可以通知父母更改，这将通过函数道具完成。但是为了让父级重新渲染和使用这些新数据，它需要自己设置状态（setState原因render）。现在状态被保存在两个地方，这是我们试图避免的事情。