在过去的几天中，需要基于React Hook + Antd的动态报告的需求。这是思考和实施重点的摘要。
需求是这样的：根据JSON动态生成表格由后端返回的形式，表单的大多数形式都是数字输入，并且有一个关键要求：某些字段之间存在依赖性，例如field3 = field1 + field22。
此外，还有一个问题。后端提供的JSON仅包含必要的属性，例如字段名称，字段标签和字段依赖性。但是，没有给出单一占位符。
好的，然后分析此动态语句逐步。相关代码已上传到CODESANDBOX-自动计算的动态语句，欢迎尝试尝试?
许多学生在一开始就充满活力，只需穿越班车，然后直接开始写作。以此方式，将有几次小时的构造。编写代码的第一步是在您心中运行所有代码并开始。特别是对于我们边界中非常清楚的“动态陈述”。确认负责人后，我们阐明了几个核心功能点：
好吧，在澄清了这些要点之后，我们知道动态边界在哪里。这次我们要做的表格是允许表格相互关联，支持折叠一些字段，只需要满足基本样式要求。如果我的一位同事有一天会对您说，哦，您太蔬菜了，即使XXX也无法实现动态形式的所谓，此时您可以打电话给他直接攀登。
更明确地说，自由程度越高，越好，仍然需要衡量业务实施。如果已经存在相关的组件降水，那么显然最好直接使用它或第二个包装。但是，如果您需要从头开始写作，以便将来不必要或可能的需求，我们可以选择一种更灵活的方法来”兼容的”。具体设计将在下面提及。
在本文的开头，提到后端只能提供一些必要的形式配置项目，而这些更个性化的配置项目无法给出。例如，您是否需要在整个数据库中添加字段？
因此，由于我们想写入前端，我们将开始小脑。我们都知道，当表单变得动态时，表单项目的设置是从初始配置项目json的。但是请考虑一下，对于动态表单组件，它不需要与配置项目相关。它只做一件事。道具接收配置项目并绘制报告页面。换句话说，我们可以在从后端读取配置项目到渲染动态报告组件后，将前端的前端注入前端，直接写入动态报告组件：
这样，我们可以通过死者写作部分的“肮脏事物”独立地走开，从而保持动态报告组件的纯度。
然后在第一步的末尾提到。实际上，这很简单。表单项目的渲染函数通过道具独立传输到动态表单组件。如果未传递，请使用默认表单eTeming渲染函数。记住，如果将来可能会更改组件的某些部分此函数到默认值。
具有单一责任的分析，我们可以获取以下组件依赖性图：
一些学生可能会好奇为什么应该将他们分为两个组成部分：业务页面和动态形式。
这是因为某些功能内容与表单无关，例如对表单正式识别的接口获取的正式位置，开关折叠按钮，产品的其他功能以及其他功能等等等等。内容与我们的动态形式无关，因此您需要将此“运动”代码与“安静”形式组件分开，以提高函数的可重复性。
好的！设计开始编写代码！请注意，下面包含的代码仅用于解释想法。在代码和框中的自动计算的动态语句中，详细的代码最好在阅读文章时阅读文章。从表单配置出现的JSON是什么？
首先，让我们关注核心需求：依赖关系的自动计算。在上图中，您可以看到有两个模块。模板表达计算是纯纯函数算法。可以读取此部分的具体介绍。它包括此部分的代码，此处简要介绍了该过程：
自动计算挂钩是根据上述工具函数封装的，以便它可以应用于React函数组件。LET现在实现此功能。此钩子应接受表单配置项目，表单的初始值和表单参数作为参数，然后将表单数据返回到表单数据和包含自动计算结果的表单的初始值。我们从返回值中得出这些参数。
首先，需求是“在更新依赖项项目时自动计算”，因此，只有当形式的数据更改时，您才需要检查依赖项是否更改并运行计算。
什么是什么“包含自动计算结果的表单的初始值”？表单的初始值易于理解，该值已分配给表单。但是我们不能直接将返回的初始值返回到表单上，因为目前，我们尚未通过onvalueSchange计算因字段值！因此，我们需要先运行自动计算，并将自动计算结果作为初始值的一部分传递到形式。目前，“所有因字段都有值，但是自动计算段为空”。有一个问题。
结果，胡克的骨骼出现了：
可以看出，它大致分为三个部分：第一个自动计算是根据依赖关系信息和初始值执行的，然后是由依赖关系信息创建的新回调函数，FormRef在此处缓存了所有内容，因为以形式。依赖性信息很难更改，这些计算更加昂贵。
从上面的挂钩中，我们可以找到两个可以实现的地方：收集依赖性信息，并根据依赖性信息自动计算。
请注意，在这里，我们分析预先计算所需的后缀表达式，而不是直接保存表达式字符串。自动计算后，您可以直接使用它而无需重复解析。
如果要计算字段E的值，则必须具有字段C的值，并且字段C的计算值需要字段A和字段B的值B，我们需要递归执行自动计算以解决此问题。具体过程如下：
此完整的代码位于DynamicForm/useautocalc.js -codesandbox中。它看起来非常复杂，但是钩子有一百多行，而且行为相对纯净。很容易理解示例的组合。
（相对）最困难的部分已经结束！接下来，让我们写下一些放松：表单项目渲染函数。
之前还提到，它是一个接受表单配置项并返回表单的JSX的函数。Simple，一种战略模式班车：
可以看出，它不仅在此处提供了配置项目，还提供了一个表单项来指定当前折叠（即外部扩展开关按钮的成分）。
需要注意的另一件事是何时折叠表单时如何处理。让我们看一下以下两种方法：
他们俩都可以达到需求，但是哪个更好？
具有编程经验的学生直接指出，这是第二个，因为使用隐藏的组件不需要反复破坏，相对性能更好。第二个也可以允许表格提供更好的现场验证和使用经验。，如果我们在不显示时直接删除表单项目，则表单不会检查此表单项目，并且我们不会保存相应的字段值，这意味着我们需要一个额外的usestate对象来保存这些更多对象来保存这些对象。隐藏值将比使用隐藏方法的编码体验要糟糕得多。
请参阅 /dynamicform/formantemrenders.js -codesandbox。
终于开始编写我们的核心组件！不用担心，因为我们已经准备好上述内容，现在将非常放松。考虑到我们的动态形式组件所需的道具？
形式配置项和表单的初始值是必要的。我们只能使用上面设计的设计。此外，需要提交回调。当我们单击提交按钮时，触发恢复将结果扔到下一个操作的外部组件中。还有一个可选的表渲染函数，这是我们在上一节中完成的。为了在组件调用时节省代码量，我们需要将其设置为默认值。哦，是的，我们需要启动折叠项，我们需要他协助呈现表单。
实际上，您可以继续添加提高灵活性的道具，例如头部小部分的渲染表，渲染表提交按钮区域等。这只是一些必要的道具。
使用这些道具，我们可以轻松地编写组件的逻辑（毕竟，本部分是在文章开头的班车编写的代码）。在这里，我们只提到一般逻辑：
请参阅dynamicform/dynamicformview.js -codesandbox。
动态表单组件已完成，因此我们可以在实际业务中调用此组件。此业务组件中的内容更简单：
当然，当动态形式组件具有足够的降水量时，此业务页面将是我们开发的主要战场，而将其称为最重的组件并不是夸张的。
请参阅formPage/formpaageview.js -codesandbox，并且注入死亡数据的功能在indectStaticData.js -codesandbox中。
在这里写作，我们已经介绍的动态报告已经开发出来。通过合理的计划和设计，大多数职责已被解耦到不同的文件模块。每个功能的长度保持在约20或三十行。与一些必要的想法结合，大餐就完成了?。
实际上，除了本文中的纯写代码外，还有一些有关如何与同事打交道的内容，包括初始字段的后端无法提供前端需要写的问题。存储后端？是的，这将非常麻烦，最终会延迟施工期，然后开始加班。后来，您必须承受背部末端同学的白眼。这真的值得吗？
对于业务需求，目标是最终交付。
为了交付，如何减少工作?将开发时间分配给特定任务是首要任务。我们通常学习设计模型和编程知识经验，我们不应该成为我们思想的约束力，但我们应该使用一些不良需求必须妥协的，我们可以帮助我们更优雅地解决它。
当然，在时间不足的情况下，如果有足够的时间，如何调节和如何来，否则偷窃的懒惰最终将回落。