一款基于大量業務實踐的輕量級高性能表單庫

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

簡單幾行代碼就可以完成表單受控, 無需關心受控邏輯, 無需關心受控過程, 只需要知道受控結果和如何應用你的受控狀態。

之前分享了很多可視化和低代碼的技術實踐, 最近技術圈友自薦了一款他們開發的基于 React 的高性能表單組件, 目前已經在各個產品線大量使用, 我體驗了一下還是非常好用的, 設計思想也很值得學習, 這里就和大家分享一下這款開源表單組件庫——react-form-simple.

背景

表單的受控控制一直是 react 里的一個痛點，當我們想要實現一個輸入框的受控控制時，需要定義 onChange 和 value 屬性，手動去實現數據的綁定。當受控的元素一多，便會出現滿屏的 set。

作者所在的公司業務比較大，偏向于后臺管理的 sass 系統，用戶群體比較大。在日常需求中，表單的開發就占據了大部分場景，而在用 react 開發表單的時候，特別是當表單字段過于復雜，表單過于龐大時，開發受控表單也要投入不小的開發生產力和不少的受控代碼，不說優雅和后期的維護，對于頁面響應速度來說，也是會隨著字段的增加而變的越來越慢，即使拆分成顆粒度最小的組件。

image.png

在一個表單業務中，字段A依賴于字段B，字段C又依賴于字段A的變化，而字段C追蹤依賴后又要實時渲染在視圖里。這是很常見的需求場景，當組織這些依賴的時候，隨之而來的考慮的是一個性能問題，我們很常見的一個做法便是狀態的提升，將它們都放到頂層容器中，統一管理。

但是這樣會隨著依賴的不斷增加，造成當前渲染的樹不斷渲染，當越來越多的字段沉積，不斷的重新渲染，最終會導致頁面崩潰，內存溢出。

在這個過程中，我們通常需要定義一系列受控代碼，以達到我們的預期。基于上述背景, 我們經過大量實踐和推演, 設計出一款輕量且高性能的表單受控解決方案 —— React-form-simple.

特點介紹

image.png

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

安裝與使用

安裝

# 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>
    </>
  );
}