我們?cè)趯W(xué)習(xí)的時(shí)候遇到的 Demo 經(jīng)常都是比較簡(jiǎn)單的，但是一旦到了實(shí)踐工作中，數(shù)據(jù)和功能就開(kāi)始變得復(fù)雜了。這個(gè)時(shí)候許多小伙伴就不知道咋處理了，他可能會(huì)把組件寫(xiě)的非常龐大。不利于維護(hù)。

我們可以在 antd 中，學(xué)習(xí)一手最佳實(shí)踐，如何把復(fù)雜的組件轉(zhuǎn)化為簡(jiǎn)單的組件。

例如我們有這樣一個(gè)復(fù)雜交互需求。這是一個(gè)樹(shù)結(jié)構(gòu)與輸入框結(jié)合的交互邏輯 Input + Tree。

在 antd 中，這樣的交互被封裝成為了一個(gè)單獨(dú)的子組件 TreeSelect。他的妙處就在于，當(dāng)我們使用該組件時(shí)，不需要關(guān)注內(nèi)部的復(fù)雜邏輯到底是如何處理的。

我們只需要關(guān)心的問(wèn)題有三個(gè)，第一，Input 和 Tree 結(jié)構(gòu)需要的初始化數(shù)據(jù)。

<TreeSelect 
  treeData={treeData}
  defaultValue={}
  placeholder="Please select"
/>

placeholder 表示沒(méi)有任何選中數(shù)據(jù)時(shí)，Input 中的提示信息?？梢栽诮M件內(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í)可能會(huì)不太理解的地方。受控屬性的目的是用于在父組件去控制 TreeSelect 的顯示。但是其實(shí)我們可能只是需要從 onChange 中獲取到當(dāng)前選中的結(jié)果，然后將這個(gè)結(jié)果整合到接口參數(shù)中去提交表單。只有當(dāng) TreeSelect 中的交互結(jié)果，會(huì)影響到其他外部組件時(shí)，我們才會(huì)考慮使用受控組件。

因此，在使用時(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ù)組件，讓其使用起來(lái)變得非常簡(jiǎn)單。

例如，我們有一個(gè)配置項(xiàng)名為被選中的學(xué)員。在頁(yè)面上我們使用一個(gè)列表來(lái)暫時(shí)選中結(jié)果列表。

在該結(jié)果展示列表中，可以刪除項(xiàng)。

當(dāng)需要重新選中時(shí)，需要點(diǎn)開(kāi)一個(gè)彈窗，然后彈窗中有一個(gè)完整的人員分頁(yè)列表。

大家可以腦補(bǔ)一下。

我們可以把這一部分統(tǒng)一封裝成一個(gè) TreeSelect 那樣的組件，命名為 PersonnelSelector，其中包括：展示結(jié)果的列表組件、彈窗組件、彈窗中的分頁(yè)列表組件。

對(duì)于內(nèi)部而言，構(gòu)成非常的復(fù)雜。

但是對(duì)于外部而言，他的構(gòu)成就非常簡(jiǎn)單，我們只需要通過(guò) value/defaultValue 回顯數(shù)據(jù)，并且通過(guò) onChange 獲取操作之后的最新選中值即可。

<PersonnelSelector 
  value={[{}, {}, {}]}
  notallow={}
/>

PersonnelSelector 就是我們封裝的業(yè)務(wù)組件。

// 簡(jiǎn)化版代碼
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>
    </>
  )
}

總結(jié)

這是一種合理抽離子組件的方式，在復(fù)雜頁(yè)面的交互中非常有用。把局部交互邏輯單獨(dú)隔離到子組件中去，而不需要在父組件中去維護(hù)彈窗組件等邏輯的狀態(tài)，從而讓頁(yè)面組件的代碼保持簡(jiǎn)潔。