2023 年的 Node.js 生態(tài)系統(tǒng)
隨著技術(shù)的不斷演進(jìn)和創(chuàng)新，Node.js 在 2023 年達(dá)到了一個(gè)新的高度。Node.js 擁有一個(gè)龐大的生態(tài)系統(tǒng)，可以幫助開發(fā)人員更快地實(shí)現(xiàn)復(fù)雜的應(yīng)用。本文就來看看 Node.js 最新的生
我們在學(xué)習(xí)的時(shí)候遇到的 Demo 經(jīng)常都是比較簡單的，但是一旦到了實(shí)踐工作中，數(shù)據(jù)和功能就開始變得復(fù)雜了。這個(gè)時(shí)候許多小伙伴就不知道咋處理了，他可能會把組件寫的非常龐大。不利于維護(hù)。
我們可以在 antd 中，學(xué)習(xí)一手最佳實(shí)踐，如何把復(fù)雜的組件轉(zhuǎn)化為簡單的組件。
例如我們有這樣一個(gè)復(fù)雜交互需求。這是一個(gè)樹結(jié)構(gòu)與輸入框結(jié)合的交互邏輯 Input + Tree。
在 antd 中，這樣的交互被封裝成為了一個(gè)單獨(dú)的子組件 TreeSelect。他的妙處就在于，當(dāng)我們使用該組件時(shí)，不需要關(guān)注內(nèi)部的復(fù)雜邏輯到底是如何處理的。
我們只需要關(guān)心的問題有三個(gè)，第一，Input 和 Tree 結(jié)構(gòu)需要的初始化數(shù)據(jù)。
<TreeSelect treeData={treeData} defaultValue={} placeholder="Please select"/>placeholder 表示沒有任何選中數(shù)據(jù)時(shí)，Input 中的提示信息。可以在組件內(nèi)部給一個(gè)通用默認(rèn)值，這樣在大多數(shù)情況就不需要顯示的傳入了。
第二，Input 受控屬性 value。
<TreeSelect treeData={treeData} value={}/>第三，當(dāng)內(nèi)部有操作變化，并且需要告知外部時(shí)，所需要執(zhí)行的鉤子函數(shù) onChange。
<TreeSelect treeData={treeData} onChange={}/>很多時(shí)候，我們并不需要受控屬性 value 。這是許多人在使用時(shí)可能會不太理解的地方。受控屬性的目的是用于在父組件去控制 TreeSelect 的顯示。但是其實(shí)我們可能只是需要從 onChange 中獲取到當(dāng)前選中的結(jié)果，然后將這個(gè)結(jié)果整合到接口參數(shù)中去提交表單。只有當(dāng) TreeSelect 中的交互結(jié)果，會影響到其他外部組件時(shí)，我們才會考慮使用受控組件。
因此，在使用時(shí)，我們需要考慮的是，利用 defaultValue 或者 value 去回顯組件在初始化時(shí)的數(shù)據(jù)。
然后利用 onChange 獲取得到最新的值即可。
這里比較有意思的是，當(dāng)我們把目標(biāo)關(guān)注到 Input 組件時(shí)，發(fā)現(xiàn) Input 組件的核心屬性也是這幾個(gè) defalutValue/value/onChange。
而 tree 組件的核心屬性，也是這幾個(gè) defalutValue/value/onChange。
因此，我們可以基于這種思路，去封裝復(fù)雜業(yè)務(wù)組件，讓其使用起來變得非常簡單。
例如，我們有一個(gè)配置項(xiàng)名為被選中的學(xué)員。在頁面上我們使用一個(gè)列表來暫時(shí)選中結(jié)果列表。
在該結(jié)果展示列表中，可以刪除項(xiàng)。
當(dāng)需要重新選中時(shí)，需要點(diǎn)開一個(gè)彈窗，然后彈窗中有一個(gè)完整的人員分頁列表。
大家可以腦補(bǔ)一下。
我們可以把這一部分統(tǒng)一封裝成一個(gè) TreeSelect 那樣的組件，命名為 PersonnelSelector，其中包括：展示結(jié)果的列表組件、彈窗組件、彈窗中的分頁列表組件。
對于內(nèi)部而言，構(gòu)成非常的復(fù)雜。
但是對于外部而言，他的構(gòu)成就非常簡單，我們只需要通過 value/defaultValue 回顯數(shù)據(jù)，并且通過 onChange 獲取操作之后的最新選中值即可。
<PersonnelSelector value={[{}, {}, {}]} notallow={}/>PersonnelSelector 就是我們封裝的業(yè)務(wù)組件。
// 簡化版代碼function PersonnelSelector() { const [selected, setSelected] = useState([]) const [open, setOpen] = useState(false) const {list} = usePagination(api) return ( <> <Table dataSource={selected} /> <Modal show={open}> <Table dataSource={list} /> </Modal> </> )}這是一種合理抽離子組件的方式，在復(fù)雜頁面的交互中非常有用。把局部交互邏輯單獨(dú)隔離到子組件中去，而不需要在父組件中去維護(hù)彈窗組件等邏輯的狀態(tài)，從而讓頁面組件的代碼保持簡潔。
本文鏈接：http://m.www897cc.com/showinfo-26-88339-0.html從 Ant Design 中，學(xué)一手復(fù)雜組件交互的優(yōu)秀實(shí)踐
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 探索.NET中的定時(shí)器：選擇最適合你的應(yīng)用場景
下一篇： 怎么更好的使用Gradle？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號