我应该在哪里更新我的复杂 React.js 表单的状态？

Question

我正在尝试解决“简单”的 react/flux 架构，我需要一些建议。基本上，我想深入研究最佳实践和通量实施。

我确实在 react.js 中实现了简单的状态完整表单。

我的表单的基本结构很接近

<Form>
    <Input name="foo" value={this.name} onChange=... />
    {items.map (i) => <Item model={i} onChange=... onRemove=... />}
    <Input name="sum" value={this.sum} onChange=... />
</Form>

状态类似于

{ name: "Bar Baz", items: List.of(new ItemRecord(...)), sum: 10 }

sum 状态的属性是从items 列表中计算出来的。

注意：表单/状态都被简化了，在现实生活中大约有 20 个输入字段。

目前我的顶级组件<Form> 存储每个输入/子组件的当前状态。您可以看到我正在向<Item> 组件提供onChange 属性，如果用户更改<Item> 组件onChange 回调被调用，ItemRecord 被更新，总和被重新计算并在帮助下设置新状态Immutability Helpers.

我希望您对它目前的工作方式有所了解。

编辑：我忘了提，<Item> 组件是无状态的，只需调用 parent.onChange 并提供一些附加信息。

---

我想知道这是否是表单的好方法，因为我目前正在考虑基于Flux 架构的一些不同的东西。

我会将 <Form> 组件的状态 outside 移动到 FormStore。状态（或它的一部分）将表示为FormRecord（Immutable.js 记录）。现在，ItemRecord 也应该被提取到ItemStore 中。另外，我会有一些方法，例如getStateFromStore() 将数据连接在一起并设置为<Form> 的状态。

我应该如何处理我的<Form> 输入的变化？我是否应该向商店调用 Input.onChange 一些操作，这将更新 FormRecord ？更新后，它将触发一些事件，该事件是 <Form> 组件侦听，并将基于 getStateFromStore() 设置当前状态？ 我想，我也应该用ItemStore 做类似的事情。

您认为，这是在 react 中形成实现的好方法吗？或者我应该采用无状态方式（但我希望在未来实时更新sum 并进行一些实时验证）并解析表单提交时的状态？

性能怎么样，用户在输入时输入不会卡顿？

---

感谢您的宝贵时间。

PS：对不起我的英语，希望你能理解重点。

Answer 1

听起来您走在正确的轨道上。项目应更新商店中的状态。然后商店将状态作为道具传递给表单。表单将每个道具传递给项目。拥有一个表单存储是有意义的。这是“单向数据流”。

不，输入没有延迟。我们已经在 Google 文档的复杂程度下完成了一个复杂的 Web 应用程序，它的性能非常好。另外，这很容易推理。这就是 React 的全部意义所在。