Javascript 何时在react中验证表单

我需要通过正则表达式验证表单中的字段，我正在考虑什么时候最好这样做：

在render方法中：这似乎是最有效的方法，因为我将只保留状态中所需的数据并计算派生数据。但是在每个渲染上运行正则表达式对性能不是很差吗

render() {
  return (
    <div>
      <input
        onChange={e => this.setState({ value: e.targe.value })}
        value={this.state.value}
      />
      Valid: {this.validate(this.state.value)}
    </div>
  );
}

在onChange处理程序中：我还可以验证onChange处理程序中的新值，并将验证结果保持在状态。这样，只有在需要时才会调用regex，但状态中会有冗余数据

render() {
  return (
    <div>
      <input
        onChange={e => this.setState({value:e.targe.value,valid:this.validate(e.target.value)}}
        value={this.state.value}
      />
      Valid: {this.state.valid}   
    </div>
  );
}

---

你最好改变一下，即你的第二种方法。理由-

在用户和表单字段交互之前，最好不要立即显示错误

对于受控文本字段，渲染将被多次调用。任何一种方法的持续验证最终都会导致明显的性能下降。您可以在第二种方法中使用非公告验证来控制这一点

保持业务逻辑与呈现分离

---

也许你们应该试着使用Redux表单来快速验证表单？在这方面肯定会有很多不同的意见。但是，一般来说，您应该尽量将状态保持在最小，从而使验证得到计算，例如在渲染中，正如您在第一个选项中所描述的那样。有多种方法可以优化它，例如记忆。首先。。。如果您希望获得性能，请不要在onChange中使用匿名函数。这样，每次调用都会创建并执行一个新函数。而是在onChange之外创建一个函数并调用它。do onChange={this.handleClick}。。。并在外部定义函数：handleChange==>{this.setState{value:e.target.value}}。另一方面，如果给定的延迟未通过，您可以在handleChange函数中添加一些延迟，以防止更改状态。管理简单验证的小插件将表单字段标记为dirty以获得更好的用户体验与验证是一个独立的问题。使派生状态的计算有效是一个独立的问题，和决定某些数据应该存储在状态中还是仅仅派生出来无关。业务逻辑可以很容易地与视图组件的呈现方法分离，同时有效地成为呈现过程的一部分，例如，如果在Redux选择器中计算的话。因此，您的观点实际上都不支持在ChangeHandler中进行验证。验证通常是在用户交互时启动的，正如您简洁地说的，这会使它们变得肮脏。对于第一种方法，需要额外的状态来跟踪。如果继续在渲染内部重新验证，则去抖动将不可行。对于redux，这个问题是没有意义的，因为所有的业务逻辑都在视图之外。第二，性能。渲染中方法的优化通常是一个单独的主题。例如，您可以在HoC中计算并存储派生状态，并保持视图组件的纯净。如果你愿意的话，你甚至可以取消计算。我把OP的代码作为一个例子——当我谈论渲染方法时，我指的是整个更新过程，包括生命周期方法，而不仅仅是渲染方法本身。无论如何，这个问题会更好地解决，因为它显然是主观的。同意主观部分，我的回答更侧重于他的具体需求，而对我来说，OP似乎知道他在做什么，并希望在这种情况下选择一种方法。