javascript - 由 Flux Store 控制的 React Form(最佳实践？)

Question

所以我有一个很大的组件就是我的表单:

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

此表单组件正在监听使用 firstAction、secondAction 等更新其值的商店

注意:组件根据返回 {firstValue: something, secondValue: something, etc} 的 store.getState() 更新其状态

假设我的 FirstComponent 是一个输入:

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

好的，所以 onChange 触发 Prop firstAction 这实际上是将更新我的商店并使表单重新呈现的 Flux Action 。我在这里有两个好处，当用户提交表单时，我可以在我的商店中检查 FirstComponent 的值，我还可以从父组件控制我的所有状态。

但是，每次用户键入一个字符时，此 onChange 回调都会调用一个操作(因此它会产生大量调用，因此会重新呈现)<-- 这会引发严重的性能问题吗？

相反，我可以使用 refs，当用户按下提交按钮时，获取 this.refs.myFirstComponent.state... 我也将拥有该值(即 Uncontrolled Component ？)但这听起来不像是来自社区的建议。

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

---

编辑 1:

使用第一种方法时，我遇到了一个问题...我使用 WebdriverIO 进行了端到端测试，在文本字段中添加了一个值:http://webdriver.io/api/action/setValue.html

我不知道为什么，但如果我试图在输入中添加单词“Testing”，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>

在这种情况下，组件似乎在键入时 react 更快(仅呈现自身)，然后，当用户移除焦点时，它会更新商店。我不得不说，我不喜欢这种方法，因为它不遵循提升状态的模式(而且我觉得我正在复制状态)但它似乎工作得更快，更重要:我的 e2e 测试有效。还有更多想法吗？

Answer 1

您的第一种方法(即 onChange 触发更新商店并使您的表单重新呈现的通量操作)似乎是一个不错的方法。我一直这样使用它，我也看到其他人也那样使用它。

关于您的以下评论:

However, this onChange callback will call an action every time the user types one character (so it can produce a lot of calls therefore re-renders) <-- can this provoke serious performance issues?

是的，我相信是这样。我曾经创建了一个组件，其中包含许多其他组件以及一些输入字段。每当我在输入字段中键入一个字符时，整个组件(及其包含的其他组件和输入字段)都会重新呈现，从而导致性能问题。如果我打字快，那会很明显。您实际上可以使用 https://facebook.github.io/react/docs/perf.html 来验证它.

无论如何，正如您提到的，我解决这个问题的方法是实现 shouldComponentUpdate() .

我想提的一个小技巧是创建自定义 <Input />环绕 <input /> 的组件并实现 shouldComponentUpdate() (即 this.props.value !== nextProps.value || this.props.checked !== nextProps.checked )这样，如果您创建一个表单组件，例如，具有许多输入字段(使用自定义 <Input /> )，只有更改的输入字段会被重新呈现。

不过，我也很想看看其他人是如何解决这个问题的。