我什么时候应该将独立状态分配给反应中的子函数(使用挂钩)?

When should i assign independent states to child functions(using hooks) in react?

我正在用 React 制作一个包含三个子组件的小项目

  1. 用于输入数据的表单,稍后将数据发布到服务器
  2. 另一种输入键然后从服务器获取其对应值的形式
  3. 服务器上当前数据的实时显示

截至目前,我已经在一个函数中声明了该项目所需的所有状态,该函数是上述所有函数的父函数。

我相信我也可以独立地在子函数中单独声明相关状态,而不是在它们的共同父函数中声明它们,并且项目会运行良好。

所以,我的问题是

在上面的示例项目中声明状态的正确方法应该是什么?或一般来说,为各州设计架构的正确方法是什么?

没有'correct archi'这样的东西。只要尊重关注点分离的核心概念,你就会被迫构建一个干净的架构。

关于状态管理,就看你的需求了。我通常喜欢实现 contextApi 来处理我的东西,但这只是一个选择,因为我必须在多个组件之间共享数据。如果您确定您的应用程序不会变胖,那么处理本地状态是一个不错的解决方案,它更容易实现。

一般来说,声明状态的正确方法是在功能(父)组件中定义它们。由于您使用的是钩子,因此您可以使用 React.useState() 来定义您的状态。

例如

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

而后面要改变states的值,直接调用子函数,使用里面的hook函数来改变值即可。

setState(newState);

通常状态变量是在大多数需要 read/change 状态的 parent 组件中创建的。

  • 当 child 需要读取状态时,parent 将其传递给 child 作为 道具。
  • 当child需要写入状态时,parent传递回调
    作为道具 child 修改状态。