React嵌套Component，任意通信

Question

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

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

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

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

但输入（可以是文本输入，复选框等任何捕获数据的东西）

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

即inputsA有一个验证表达式，如formData.inputB＆gt; formData.inputA + formData.inputC

但如果你不提供验证表达，他们也可能完全不依赖。

如果我将整个formData传递给组件树，每次输入一个输入时，整个表单都会重新呈现。

我考虑过redux，但真的不确定redux如何帮助这种情况。我仍然是相对较新的反应和减少，所以我可能是错的。

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

Answer 1

当你模仿表单元素时，这是一个常见的问题。我有同样的问题。

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

Answer 2

1. 您的问题有各种解决方案，但一般情况下它甚至不应该是一个问题，因为渲染（即使是大型表格）应该对React非常有效。

2. 在React中调整性能的核心工具是组件类的shouldComponentUpdate方法。如果您对传递到各个表单字段的内容很清楚，然后在它们上正确实现shouldComponentUpdate，那么您应该只在需要时才能更新。在您的特定示例中，您无需在任何地方传递完整对象。

   您可以将value，onChange和isInvalid传递给每个字段，并计算根目录的有效性（您可以访问完整状态）。然后，shouldComponentUpdate字段可以根据props来决定。 （显然这是一个简单的例子，但作为一个原则，它是合理的。）

3. 当然，Redux是另一种可能的解决方案。如果你将状态保存在Redux存储中并且只将每个字段连接到它所需的状态部分，那么你应该全部设置好。它在体系结构方面带来了相当大的变化，所以你应该只选择Redux，如果你真的想要它作为一个整体的应用程序。