在react中，我应该何时将独立状态分配给子函数(使用钩子)

Question

我正在react中做一个小项目，它有三个子组件

1. 一个表单，用于输入数据，然后将数据发布到服务器
2. 另一个表单，用于输入密钥，然后从服务器获取相应的值
3. 实时显示服务器上的当前数据

到目前为止，我已经在一个函数中声明了该项目中所需的所有状态，该函数是上述所有函数的父函数。

我相信我也可以独立地在子函数中单独声明相关状态，而不是在它们的公共父函数中声明它们，这样项目就可以正常工作了。

所以，我的问题是

在上面的示例项目中，声明状态的正确方法应该是什么？或者，在为一般状态设计体系结构时，正确的方法是什么？

Answer 1

通常情况下，状态变量是在大多数需要读取/更改状态的父组件中创建的。

• 当孩子需要读取状态时，家长会将其作为道具
• 当子级需要写入状态时，父级将回调
  函数作为道具传递给子级以修改状态

Answer 2

没有所谓的"correct archi"。只要尊重关注点分离的核心概念，你就会被迫构建一个干净的体系结构。

对于国家管理来说，这取决于您的需求。我通常喜欢实现contextApi来处理我的东西，但这只是一种选择，因为我必须在多个组件之间共享数据。如果你确信你的应用程序不会变胖，那么处理本地状态并不是一个糟糕的解决方案，它更容易实现。

Answer 3

通常，声明状态的正确方法是在函数(父(组件中定义它们。由于您正在使用hook，因此可以使用React.useState((来定义您的状态。

例如。

const [state, setState] = React.useState(initialState);

为了以后更改状态的值，您可以简单地调用子函数并使用内部的钩子函数来更改值。

setState(newState);