React中构建state的原则

如果希望在两个组件的状态可以同步更改，可以将相关state从这两个组件上移除，并把state放到它们的公共父组件，再通过props将state传递给这两个组件，这被称为“状态提升”;

1. 从子组件中移除状态
2. 从公共父组件传递硬编码数据
3. 为公共组件添加状态

将状态移至公共父组件中可以更好地管理两个两个子组件，而通过向下传递事件处理函数可能让子组件修改父组件的状态。

受控组件和非受控组件

我们把包含“不受控制”状态的组件称为“非受控组件”，其父组件无法控制它的状态。而当组件中的重要信息是由props而不是自身状态驱动时，就可以认为该组件是“受控组件”。这允许父组件完全指定其行为。

非受控组件通常很简单，因为它们不需要太多配置，但当把它们组合在一起使用时就不那么灵活了。受控组件具有最大的灵活性，但它们需要父组件使用props对其进行配置。

在实践中，“受控”和“非受控”并不是严格的技术术语——通常每个组件都同时拥有内部状态和props。然而这对于组件该如何设计和提供什么样的功能的讨论是有帮助的，当开始编写一个组件时，考虑哪些信息应该受控制（通过props），哪些信息不应该受控制（通过state）是十分有益的。

结论

在React应用中，很多组件都有自已的状态。对于每个独特的状态，都应该存在且只存在于一个指定的组件中作为state,这一原则也被称为拥有“可信单一数据源”。它并不意味着所有状态都存在一个地方——对每个状态来说，都需要一个特定的组件来保存这些状态信息。应该将状态提升到公共父级，或将状态传递到需要它的子级中，而不是在组件这间复制共享的状态。

来源：学习React