Reactjs 反应嵌套组件，任意通信

关于react组件通信有很多答案，但似乎没有一个解决了我的问题。这是我的问题的细节。请帮忙！提前谢谢

我正在构建一个灵活的表单。UI是通过嵌套组件生成的

表单数据结构也可以是嵌套的json对象

i、 e表单可以有一些输入和部分，部分可以有一些输入或部分，然后继续。 节只是UI布局组件，不关心数据或状态

但是输入（可以是文本输入、复选框等任何用于捕获数据的内容）

我面临的问题是，任何输入的验证都可能取决于任何其他输入的值

i、 e inputA具有类似formData.inputB>formData.inputA+formData.InputUTC的验证表达式

但如果不给出验证表达式，它们也可能完全没有依赖关系

如果我将整个表单数据向下传递到组件树，每次我输入一个输入，整个表单都将重新加载

我考虑过redux，但不确定redux如何帮助这种情况。我还是比较新的反应和重复，所以我可能是错的

---

那么，什么是可行的解决方案呢？

在模块化表单元素时，这是一个常见的问题。我也有同样的问题

Redux是迄今为止最受控制的解决方案。所有组件都可以同时侦听和更新同一对象。但您也可以将函数作为从父级绑定到父级的道具附加。该函数将获取父级的状态，并像临时存储一样更新状态。如果您是一名优秀的开发人员，这是可能的，但两者都不容易做到。学习的好时机：）

您的问题有多种解决方案，但一般来说，它甚至不应该是一个问题，因为React的渲染（即使是大型形式）应该非常有效

React中调整性能的核心工具是组件类的

shouldComponentUpdate

方法。如果您对传递给各个表单字段的内容很了解，然后在这些字段上正确实现

shouldComponentUpdate

，那么您应该能够仅在需要时进行更新。在您的特定示例中，不需要到处传递完整对象

您只需将

value

、

onChange

和

isInvalid

传递到每个字段，并在根位置计算有效性（您可以访问完整状态）。然后，字段的

shouldComponentUpdate

就可以根据这些

道具来决定了。（显然，这是一个过于简单的例子，但作为一项原则，这是合理的。）

当然，Redux是另一种可能的解决方案。如果将状态保留在Redux store中，并且只将每个字段连接到它所需的状态部分，则应该全部设置。不过，它在架构上带来了很大的变化，所以只有当你真的希望整个应用程序都使用Redux时，你才应该选择Redux

---

你有一些代码要显示吗？或者它仍然在你的脑海中？我现在没有代码要显示，我正在评估react是否能够处理这种情况，然后再进行一次深度div。重新呈现表单有什么问题吗？对于小表单是可以的。但一旦形状变大。您键入一个输入，然后整个表单只需重新渲染就会遇到性能问题。