Question

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

我确实在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>存储每个输入/子组件的当前状态。您可以看到我向onChange组件提供了<Item>属性，如果用户更改<Item>组件，则会调用onChange回调，并更新ItemRecord， sum是重新计算的，并且在Immutability Helpers的帮助下设置了新状态。

我希望你能了解它目前是如何运作的。

编辑：我忘了提及，<Item>组件是无状态的，只需使用其他信息调用parent.onChange。

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

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

我应该如何处理<Form>输入的更改？我应该在商店中调用Input.onChange一些操作，这会更新FormRecord吗？一旦更新，它将触发一些事件<Form>组件侦听，它将根据getStateFromStore()设置当前状态？我想，我也应该使用ItemStore做类似的事情。

您如何看待这种形式实施的好方法是什么？或者我应该采用无状态方式（但是我希望在将来实时更新sum并进行一些实时验证）并在表单提交时解析状态？

当用户输入时，性能如何不会变得迟钝？

感谢您的时间。

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

Answer 1

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

不，输入不是迟钝的。我们在Google文档的复杂程度上完成了一个复杂的Web应用程序，并且性能非常高。此外，它很容易推理。这就是React的重点。

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

1 个答案: