鴻蒙OS 4.0公測機型公布：甚至連nova6都支持
華為全新的HarmonyOS 4.0操作系統將于今天下午正式登場，官方在發布會之前也已經正式給出了可升級的機型產品，這意味著這些機型會率先支持升級享用。這次的HarmonyOS 4.0支持
之前分享了很多可視化和低代碼的技術實踐, 最近技術圈友自薦了一款他們開發的基于 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.www897cc.com/showinfo-26-43287-0.html一款基于大量業務實踐的輕量級高性能表單庫
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
下一篇： DiffUtil和它的差量算法
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號