一款基于大量業(yè)務(wù)實(shí)踐的輕量級(jí)高性能表單庫(kù)

作者：徐小夕 2023-12-12 13:50:00

簡(jiǎn)單幾行代碼就可以完成表單受控, 無(wú)需關(guān)心受控邏輯, 無(wú)需關(guān)心受控過(guò)程, 只需要知道受控結(jié)果和如何應(yīng)用你的受控狀態(tài)。

之前分享了很多可視化和低代碼的技術(shù)實(shí)踐, 最近技術(shù)圈友自薦了一款他們開(kāi)發(fā)的基于 React 的高性能表單組件, 目前已經(jīng)在各個(gè)產(chǎn)品線(xiàn)大量使用, 我體驗(yàn)了一下還是非常好用的, 設(shè)計(jì)思想也很值得學(xué)習(xí), 這里就和大家分享一下這款開(kāi)源表單組件庫(kù)——react-form-simple.

背景

表單的受控控制一直是 react 里的一個(gè)痛點(diǎn)，當(dāng)我們想要實(shí)現(xiàn)一個(gè)輸入框的受控控制時(shí)，需要定義 onChange 和 value 屬性，手動(dòng)去實(shí)現(xiàn)數(shù)據(jù)的綁定。當(dāng)受控的元素一多，便會(huì)出現(xiàn)滿(mǎn)屏的 set。

作者所在的公司業(yè)務(wù)比較大，偏向于后臺(tái)管理的 sass 系統(tǒng)，用戶(hù)群體比較大。在日常需求中，表單的開(kāi)發(fā)就占據(jù)了大部分場(chǎng)景，而在用 react 開(kāi)發(fā)表單的時(shí)候，特別是當(dāng)表單字段過(guò)于復(fù)雜，表單過(guò)于龐大時(shí)，開(kāi)發(fā)受控表單也要投入不小的開(kāi)發(fā)生產(chǎn)力和不少的受控代碼，不說(shuō)優(yōu)雅和后期的維護(hù)，對(duì)于頁(yè)面響應(yīng)速度來(lái)說(shuō)，也是會(huì)隨著字段的增加而變的越來(lái)越慢，即使拆分成顆粒度最小的組件。

image.png

在一個(gè)表單業(yè)務(wù)中，字段A依賴(lài)于字段B，字段C又依賴(lài)于字段A的變化，而字段C追蹤依賴(lài)后又要實(shí)時(shí)渲染在視圖里。這是很常見(jiàn)的需求場(chǎng)景，當(dāng)組織這些依賴(lài)的時(shí)候，隨之而來(lái)的考慮的是一個(gè)性能問(wèn)題，我們很常見(jiàn)的一個(gè)做法便是狀態(tài)的提升，將它們都放到頂層容器中，統(tǒng)一管理。

但是這樣會(huì)隨著依賴(lài)的不斷增加，造成當(dāng)前渲染的樹(shù)不斷渲染，當(dāng)越來(lái)越多的字段沉積，不斷的重新渲染，最終會(huì)導(dǎo)致頁(yè)面崩潰，內(nèi)存溢出。

在這個(gè)過(guò)程中，我們通常需要定義一系列受控代碼，以達(dá)到我們的預(yù)期?；谏鲜霰尘? 我們經(jīng)過(guò)大量實(shí)踐和推演, 設(shè)計(jì)出一款輕量且高性能的表單受控解決方案 —— React-form-simple.

特點(diǎn)介紹

image.png

通過(guò)創(chuàng)建一個(gè)可觀(guān)察對(duì)象來(lái)觀(guān)察表單的模型操作, 表單項(xiàng)的受控直接通過(guò)_. 賦值。
簡(jiǎn)單幾行代碼就可以完成表單受控, 無(wú)需關(guān)心受控邏輯, 無(wú)需關(guān)心受控過(guò)程, 只需要知道受控結(jié)果和如何應(yīng)用你的受控狀態(tài)。
每個(gè)表單項(xiàng)之間的渲染自動(dòng)完全隔離, 不需要自行組織組件隔離。這將能夠更快的處理表單輸入后的響應(yīng)速度, 以及很大程度的避免在大型動(dòng)態(tài)數(shù)據(jù)下造成的頁(yè)面卡頓。
具有數(shù)據(jù)觀(guān)測(cè)功能, 可以在某些場(chǎng)景下對(duì)整個(gè)表單或者某個(gè)具體的表單項(xiàng)進(jìn)行單一或者統(tǒng)一的觀(guān)察監(jiān)測(cè), 可以在你需要用表單項(xiàng)最新的值進(jìn)行渲染的地方進(jìn)行值的訂閱。
靈活的使用方式, 靈活的頁(yè)面布局組合, 開(kāi)發(fā)者可以根據(jù)自己的喜好和場(chǎng)景使用某種方式以及內(nèi)置布局。在大多數(shù)場(chǎng)景下, 無(wú)需開(kāi)發(fā)者手動(dòng)布局。
簡(jiǎn)約的 API 設(shè)計(jì), 在操作表單的過(guò)程中, 簡(jiǎn)單的只需要引入兩個(gè) API, 就可以完成大部分工作。
高度可擴(kuò)展的表單接口, 在一些復(fù)雜需求或者定制化場(chǎng)景中, 開(kāi)發(fā)者可以自行定制表單的控制邏輯。
可以輕易集成在你的 UI 或者第三方庫(kù)中。
完整的類(lèi)型推斷。

安裝與使用

安裝

# yarn add react-form-simple
npm 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>
    </>
  );
}