小米官宣：2023年上半年出貨量中國(guó)第一！
今日早間，小米電視官方微博帶來(lái)消息，稱(chēng)2023年小米電視上半年出貨量達(dá)到了中國(guó)第一，同時(shí)還表示小米電視的巨屏風(fēng)暴即將開(kāi)始。“公布一個(gè)好消息2023年#小米電視上半年出貨量中國(guó)
之前分享了很多可視化和低代碼的技術(shù)實(shí)踐, 最近技術(shù)圈友自薦了一款他們開(kāi)發(fā)的基于 React 的高性能表單組件, 目前已經(jīng)在各個(gè)產(chǎ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)滿屏的 set。
作者所在的公司業(yè)務(wù)比較大，偏向于后臺(tái)管理的 sass 系統(tǒng)，用戶群體比較大。在日常需求中，表單的開(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依賴于字段B，字段C又依賴于字段A的變化，而字段C追蹤依賴后又要實(shí)時(shí)渲染在視圖里。這是很常見(jiàn)的需求場(chǎng)景，當(dāng)組織這些依賴的時(shí)候，隨之而來(lái)的考慮的是一個(gè)性能問(wèn)題，我們很常見(jiàn)的一個(gè)做法便是狀態(tài)的提升，將它們都放到頂層容器中，統(tǒng)一管理。
但是這樣會(huì)隨著依賴的不斷增加，造成當(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.
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> </> );}通過(guò)筆者的測(cè)試, 一次創(chuàng)建500個(gè)表單項(xiàng), 性能還是非常能打的, 如下:
image.png
image.png
image.png
image.png
如果大家對(duì)這個(gè)開(kāi)源庫(kù)的實(shí)現(xiàn)方案或者想體驗(yàn)一下這款開(kāi)源項(xiàng)目, 也歡迎使用反饋, 讓這款表單庫(kù)更加健壯.
本文鏈接：http://www.tebozhan.com/showinfo-26-43287-0.html一款基于大量業(yè)務(wù)實(shí)踐的輕量級(jí)高性能表單庫(kù)
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： Python中Subprocess庫(kù)的用法詳解
下一篇： DiffUtil和它的差量算法
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)