javascript - 如何在没有无限循环的情况下在 react.js 中执行子组件验证

Question

我在 react 中有非常简单的例子。父组件通过 props 将数据传递给子组件。在子组件内部，我可以更改此数据，也可以随时将新数据从父组件传递给子组件。同样在 parent 身上我有保存按钮。按下它后，如果某些验证未通过，我应该显示验证消息。我是这样实现的。我从父级传递回调以通知父级数据的有效性已更改。在 child 内部，我在三个地方执行验证:

• componentDidMount - 验证初始数据
• componentWillReceiveProps - 验证可以从父级传递的数据
• onChange 验证输入的数据每当 child 执行数据验证时，我都会调用回调来通知 parent 有效性。问题出在 componentWillReceiveProps 中。在父级中使用 setState 这部分会导致无限循环 - 请参见下图。 请查看jsfiddle在控制台中，您可以看到我将无限循环限制为 10 次迭代，以防止浏览器崩溃。

如您所见，存在无限循环 - 因为 React 以不太聪明的方式调用 componentWillReceiveProps - 每个渲染周期而不是仅在 props 实际更改时才调用它。我真的很想知道解决这个问题的 react 方式是什么。我应该只在 child 中存储子状态吗？我还尝试在州外的 parent 中存储 child 的有效性 - 但我的同事说这不是 react 方式 - 为什么？

Answer 1

以下是我对您的挑战的看法:

• 您希望在您的子组件中使用您的验证方法，因为它特定于此类子组件(例如，密码输入字段)。 - 但在 React 中，不允许任何外部组件(孙子组件除外)直接调用此方法。
• 您希望您的父级了解每个子组件的有效性(例如，确定所有字段是否有效并允许提交表单)——因此您需要父级组件中的验证方法的结果，以及这必须是状态

您的同事是正确的:React 不喜欢您将组件范围的变量存储在状态之外。因为这些变量完全独立于 React 生命周期方法等，并且会让你很快陷入调试困境。

我建议您进行以下更改以防止死循环:

• 不要将 child 的有效性存储在 child 状态中。将结果+任何消息保存在父级中，并将其作为 Prop 传递给子级。 Child 只渲染 Prop 。
• 实现 shouldComponentUpdate()，它检查是否有任何 Prop 或状态变量发生了变化。如果不返回false，否则返回true。
• 将对 validate() 的调用从 componentWillReceiveProps 移至 componentWillUpdate()。这在 shouldComponentUpdate() 之后调用。因此，只有当 Prop 或子状态发生变化时，才会进行验证(和重新渲染)。