由Flux Store控制的React Form（最佳实践？）

问题描述

所以我有一个很重要的组成部分：

<form>
 <FirstComponent value={this.state.firstValue}/>
 <SecondComponent value={this.state.secondValue}/>
 {more components here}
 <input type="submit" ... />
</form>

此表单组件正在侦听使用firstAction ， secondAction等更新其值的存储。

注意：组件基于store.getState（）更新其状态，返回{firstValue: something, secondValue: something, etc}

那么让我们说我的FirstComponent是一个输入：

<input type="text" value={this.props.value} 
   onChange={(e)=>this.props.firstAction(e.target.value)}
</input>

好的，所以onChange触发了prop的firstAction ，它实际上是Flux动作，它将更新我的商店并使表单重新渲染。 我有两个好东西，当用户提交表单时，我可以检查我的商店中的FirstComponent的值，并且我还控制来自父组件的所有状态。

但是，每次用户键入一个字符时，此onChange回调将调用一个操作（因此它可以产生大量调用，因此重新渲染）< - 这会引发严重的性能问题吗？

相反，我可以使用refs，当用户按下提交按钮时，获取this.refs.myFirstComponent.state ...我也将获得该值（这将是 ？）但这听起来不像是来自社区。

所以我的问题是，我上面描述的第一种方法是一个很好的方法吗？ 我该如何优化它？ 那么只应该影响FirstComponent的重新渲染不会使SecondComponent等重新渲染？ shouldComponentUpdate是唯一的方法吗？

编辑1：

第一种方法我面临一个问题......我使用WebdriverIO进行e2e测试，在文本字段中添加一个值： ：//webdriver.io/api/action/setValue.html

我不知道为什么，但如果我试图在输入中添加“测试”这个词，webdriver只会添加最后一个字母。 如果不使用状态/存储，这个问题就消失了。 但是，如果我在我的FirstComponent内部有状态，例如：

<input type="text" value={this.state.value} 
   onChange={(e)=>this.setState({firstValue: e.target.value})}
   onBlur={()=>this.props.callback(this.state.firstValue)}
</input>

在这种情况下，组件在键入时似乎反应更快（仅渲染自身），然后，当用户移除焦点时，它会更新商店。 我不得不说，我不喜欢这种方法，因为它不遵循你的状态（我觉得我复制状态）的模式但是它似乎工作得更快更重要：我的e2e测试工作。 还有什么想法吗？