需求定义:
问题分解(TLDR):
JSON形式一代:
例如,有这样的基本形式结构:
键入常规组件类型(本文将ANT设计组件作为示例^1),常规组件,例如复选框,选择,输入等。通常通常需要一些布局组件,例如倒塌折叠面板,选项卡选项卡页面等。
类型的自定义组件类型,在会议表单模板结构的前提下进行的自我创建,可以是基于业务系统,交互式组件的组件,或扩展基本组件(例如字体组件)(例如字体组件)配置项目的字体颜色和字体fomatewait。
使用基本组件表单模板,我们如何更自由地传递表单的定义,并将“肆意”组合在一起以结合所需的结构。例如,就像构建块一样,您只需要足够的基本元素和基本元素类型即可无限无限无限延迟。
无限嵌套:
扩展后形式模板:
树木结构的设计没有新事物和困难。轻微复杂性的点在于数据的恢复更新和树状组件的渲染优化。这些将在下一章中扩展。
兄弟节点链接:
由于这是兄弟节点之前的关系之间的关系,因此最好的解决方案是“调度”到父组件,而父组件“坐标” sub -component.Sub -component.HOUSE的关系是一个可能的解决方案是Sub的值- 组件监视目标组件,会影响其自身的变化。根据简单需求,可能没有好事或坏处,但是还有其他因素值得关注。
从底部到底部从上到下的依赖性,DAG检测??组件模式控制组件模式非控制组件模式。本文主要采用父母组件的“协调”方法。主要原因是它可以更灵活,并充分利用非使用非使用非使用非使用权。控制组件,控制和非控制组件的优势将在稍后讨论。
在扩展表单模板之前,我们需要确定实施功能的几个因素:
首先,对于因组件密钥,我们可以通过定义dep来指定因组件的键值。使用钥匙值,我们可以获取因组件的当前值。如果您需要更高级的转换,则可以将自定义函数f用于用户转换,最后将特定属性值返回自身。组件“显示标签”是一个复选框组件。启用表演标签后,B组件输入可以打开编辑模式,否则不允许编辑器。
注意:很容易在此处显示文件中的JavaScript。在使用方面,简单的JSON数据格式不支持保存该功能。
扩展模板如下:
接下来是父组件的设计,可以从JS文档中详细查看:
注意:组件本身通过父子女组件和操作的值更改。dag依赖性检测和子组件的“安全范围”更新其自己的属性值
通过上述,组件自定义表单组件生成器的基本结构已完成。接下来,讨论自定义表格的一些设计和优化。
关于“状态管理”的主题,您不想做太多。这里需要讨论的是,原子组件的设计是在组件内部自我固定还是完全依赖外部输入。他们和如何选择之间的优点和缺点是什么。
在html中,表元素(例如输入,文本方面和选择)通常自己维护状态并根据用户输入进行更新。在react中,可变状态通常存储在组件的状态属性中,只能是通过使用setState()更新以更新^2。在大多数情况下,我们建议使用控制组件来处理表单数据。在控制组件中,表单数据由React组件管理。
简而言之,如何使用我们的组件使用我们的完整权利来说话和自由。请使用React组件,控制组件意味着需要手动需要该值,并且在Onchange之后进行了值的值,从例如:
因为非控制组件将真实数据存储在DOM节点中,因此在使用非控制组件时,有时同时集成React和非反馈代码更容易。如果您不介意代码的美学并想要并想要要快速编写代码,使用非控制组件通常可以减少您的代码。否则,您应该使用控制组件。^3
与控制组件相反,非控制组件只能关注默认值的默认值和最终输出的变更值。它不关心如何内部封装。
从组件的用户的角度来看,存在以下差异^4:
在更改格式化输入内容??动态更改时,获取控制值变验证控制值??支持外部触发刷新渲染??内部组件以刷新组件的设计器是否如下
需要编码和维护状态迟延迟存储更改。摘要在这里。这显示了控制组件和非控制组件之间的定义和差异是什么。为了设计“无限”类的设计,“支持外部触发刷新渲染”,“动态变更值”,“内部组件刷新是否可控”,这些因素将限制组件模式的选择,尤其是对于非 - 中的组件的选择组件树中的叶子节点,控制组件是一个更好的选择。对于叶子节点的组件,如果业务逻辑很复杂,并且存在“大量”临时状态数据(这里的复杂业务逻辑将生成“大量”根据个人设计经验,许多临时状态都没有准确测量的指导价值,请考虑自己的选择),更适合打包有偏向私人业务的自定义组件。
这里提出了一个问题。对于组件树,它通常是分支的分支的更改,而其他分支则未更新。如何实现“本地”刷新,而不是刷新整个情况和不必要的浏览器性能。
此问题的本质在于如何在组件监视自己的依赖项(例如组件输入的值)时如何判断它是否正在“改变”。对于简单类型(例如字符串和数字类型),我们可以基于是否基于价值本身会改变,但对于对象类型的复杂程度稍微复杂一点:
问题1自然解决。对于问题2,需要不变的数据结构来比较对象值是否已与不可变的工具更改。示例^6的toke impuctablejs在此处,您还可以选择由reduxjs选择的不变的数据结构库imperjs^7。两者的原理略有不同。
在这一点上,我们拥有如何区分依赖性变化的工具和方法。在下一步中,我们需要收集React Memo,以确定是否更新组件本身。
在这一点上,我们简单地意识到如何使用不变 + React Memo来实现本地刷新的功能。您无法写入如何在此处更新数据。您可以独自参考Immablejs或Immerjs API。
更新了无限极点的组件,并且需要为共享状态更新数据集。核心问题是如何在树节点的位置找到组件的位置。
一个可行的解决方案是,当创建组件时,您可以根据零件父亲和儿子的关键水平获得子组件的唯一索引钥匙链,例如['group1',''''''','label','showland'],相应的树链如下。
更新子组件值时,您只需要传递到键链和变更值即可。
另一个更常用的解决方案是根据文件的钥匙扣快速查找并更新树状结构,以通过转换钥匙链来快速到字符串,例如“ group1.label.showlabel”。
本文希望吸引更多的建议和思考。在形式生成组件的设计行业中,还有许多成熟的产品和设计思想。在这里,我们总结了某些项目中遇到的一些问题和解决方案。我希望思考和探索更多有关特定问题的信息。
目前,仍然存在一些不可用的缺点,例如原子组件的布局,自定义原子组件的动态注册等,将来会更新。