如何在状态更改时停止ReactJS组件重新呈现

Question

我有一个带有一些输入字段的表单（其中一些隐藏，直到选中一个复选框。当我选中/取消选中该复选框时，会设置一个特定的状态（ this.state.isChecked = true/false ）。

在渲染方法上，我有一个包含一些类的div（包含一些输入字段），并且该条件用于“显示”类： <div className={'extra-fields ' + (this.state.isChecked? ' show' : '')}>...</div>

预期的行为是在状态更改时，仅将“ show”类放入div或从div中删除当前行为：再次呈现整个表单，并且所有输入字段中写入的数据都会丢失。

应该怎么做呢？

Answer 1

如果输入字段的值很重要（显然很重要），并且可以更改（很明显可以更改），那么React应该知道它们，通常处于状态。
维护输入字段内容的“标准”（仅启用）反应方式是：

• 也将输入字段的内容置于状态，
• 在每个输入字段的呈现中包含诸如value={this.state.foo}和onChange={this._onChange()}之类的内容
• 在_onChange()包含_onChange()函数以处理输入更改

这样，每当重新呈现表单时（在每个setState() ），输入值也将被保留。

PS：问题标题“在状态更改时停止重新渲染ReactJS组件”并未真正涵盖文本中的问题：您要求部分重新渲染：请根据复选框重新渲染显示/隐藏额外的字段，但是不重新渲染输入字段。

Answer 2

简短的答案是，您可以使用shouldUpdateComponent生命周期事件阻止组件渲染/更新： https ://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

但是，我同意前面的回答，即为了进行听起来像是部分重新渲染的操作，并且为了遵循一般的最佳做法，您应该将输入字段的状态存储在组件中的某个位置，以便它们持久存在除了渲染调用。