之前分享了很多可视化和低代码的技术实践, 最近技术圈友自荐了一款他们开发的基于 React 的高性能表单组件, 目前已经在各个产品线大量使用, 我体验了一下还是非常好用的, 设计思想也很值得学习, 这里就和大家分享一下这款开源表单组件库——react-form-simple.
表单的受控控制一直是 react 里的一个痛点，当我们想要实现一个输入框的受控控制时，需要定义 onChange 和 value 属性，手动去实现数据的绑定。当受控的元素一多，便会出现满屏的 set。
作者所在的公司业务比较大，偏向于后台管理的 sass 系统，用户群体比较大。在日常需求中，表单的开发就占据了大部分场景，而在用 react 开发表单的时候，特别是当表单字段过于复杂，表单过于庞大时，开发受控表单也要投入不小的开发生产力和不少的受控代码，不说优雅和后期的维护，对于页面响应速度来说，也是会随着字段的增加而变的越来越慢，即使拆分成颗粒度最小的组件。
image.png
在一个表单业务中，字段A依赖于字段B，字段C又依赖于字段A的变化，而字段C追踪依赖后又要实时渲染在视图里。这是很常见的需求场景，当组织这些依赖的时候，随之而来的考虑的是一个性能问题，我们很常见的一个做法便是状态的提升，将它们都放到顶层容器中，统一管理。
但是这样会随着依赖的不断增加，造成当前渲染的树不断渲染，当越来越多的字段沉积，不断的重新渲染，最终会导致页面崩溃，内存溢出。
在这个过程中，我们通常需要定义一系列受控代码，以达到我们的预期。基于上述背景, 我们经过大量实践和推演, 设计出一款轻量且高性能的表单受控解决方案 —— React-form-simple.
image.png
_. 赋值。# yarn add react-form-simplenpm install react-form-simple
image.png
代码如下:
import Button from '@components/Button';import React from 'react';import { useForm } from 'react-form-simple';export default function App() { const { model, render, setState, validate } = useForm({ fields: [{ value: '', uid: 1 }], }); const { fields } = model; const renderFields = fields.map((field, i) => render(`fields.${i}.value`, { label: `name${i}`, labelPosition: 'top', rules: { required: 'Please Input' }, key: field.uid, })(<input className="input" />), ); return ( <> {renderFields} <Button notallow={() => { const len = model.fields.length; model.fields.push({ value: len + '', uid: len + 1 }); setState(); }} > add </Button> <Button plain style={{ marginLeft: '15px' }} notallow={() => { validate(); console.log(model); }} > submit </Button> </> );}通过笔者的测试, 一次创建500个表单项, 性能还是非常能打的, 如下:
image.png
image.png
image.png
image.png
如果大家对这个开源库的实现方案或者想体验一下这款开源项目, 也欢迎使用反馈, 让这款表单库更加健壮.
本文链接：http://www.28at.com/showinfo-26-43287-0.html一款基于大量业务实践的轻量级高性能表单库
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
下一篇： DiffUtil和它的差量算法
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号