如何管理反应中复杂的项目列表？

Question

我正在构建一个多面搜索组件。我无法弄清楚如何以及在哪里处理状态。

解决方案#1

父组件管理状态- 使用减速器来管理所有组件并将状态向下传递

缺点：子组件有很多复杂性（自动完成、焦点状态），并且更新父级的状态会导致子组件重新渲染。这意味着子组件的焦点状态和建议无法正常工作。

优点：设计更简洁，状态在一个减速器中处理

子组件管理自己的状态（如不受控制的组件）。父组件仅管理创建、删除新的复杂组件。一旦孩子们知道他们完成了（失去焦点），他们就会更新对父母的引用。

缺点：管理两个状态和重复的关键错误

优点：子组件按预期工作

这两种解决方案都很难实现，但到目前为止，我对解决方案 #2 的运气更好。

有没有这方面的好例子？似乎可编辑的待办事项列表也会有类似的问题。

我喜欢解决方案#1 的想法，但我认为我需要一种方法来推迟更新状态。

Answer 1

当您的状态很复杂并且由多个兄弟姐妹/孩子使用时，您肯定希望该状态存在于共同的父级上。解决方案 2 中，兄弟姐妹各自管理复杂状态的一部分，这将成为维护的一场噩梦 - 因为您必须在处理一个状态时牢记所有这些不同的状态。

另一件需要记住的事情是国家本身的形态。对于由多种类型组成的状态，useReducer()将是您更好的选择。

例如; 一个复杂的状态是：

... = usestate({
"user" : {
"name": "",
"age" : null},
skills: [],
rate: 50,
company: "default",
reviews: [],
});

要更新此状态，您必须编写大量类型检查和不同类型的扩展。有些是数组，有些是 int，有些是 String 等。

在这一点上，减速器就更有意义了。减速器通过操作和有效负载来处理状态。然后，状态逻辑位于这些组件的单独文件中。