我從製作React組件中學到的兩個課程

這是我學到的幾個課程，了解如何不構建反應組件。這些是我過去幾個月來遇到的事情，如果您正在使用設計系統，尤其是一個擁有大量舊技術決策和大量技術債務的設計系統，他們可能會感興趣。

第1課：盡可能多地避免兒童組件

在具有許多組件的大型設計系統上工作的一件事是，以下模式最終開始變得有問題真正的實際問題：

 <card>
  <card.header>標題</card.header>
  <card.body> <p>這是一些內容</p> </card.body>
</card>

有問題的零件是那些兒童組件，card.body和card.header。這個示例並不糟糕，因為事情相對簡單 - 當組件變得越來越複雜時，事情就會變得笨拙。例如，每個兒童組件都可以具有一系列干擾其他的複雜道具。

我最大的痛點之一是我們的形式組件。以此：

提交 取消

當然，我正在大量簡化事情，但是每當工程師想要將兩個按鈕彼此放置時，即使頁面上沒有表格，它們也會導入表單。這意味著表單組件中的所有內容都會導入，最終對性能不利。恰好是不良系統設計實施。

在記錄組件時，這也使事情變得更加困難，因為現在您必須確保這些孩子的組件中的每個組件都會記錄下來。

因此，我們應該簡單地將其製成一個全新的組件，而不是使其成為兒童組成部分，而是將其製成：formactions（或者可能具有更好的名稱，例如ButtOngongroup）。這樣，我們不必一直導入形式，我們可以將基於佈局的組件與其他組件分開。

我學到了我的教訓。從這裡開始，我將完全避免使用兒童組件。

第2課：確保您的道具不會相互衝突

曼迪·邁克爾（Mandy Michael）寫了一篇很棒的文章，講述了道具如何互相撞擊並引起各種令人困惑的衝突，例如這個打字稿示例：

接口props {
  Hidemedia？ ：布爾
  Mediaisedgetoedge？ ：布爾值
  Mediafullheight？ ：布爾值
  videoinline？ ：布爾
}

曼迪寫道：

這些道具的目的是改變卡片中圖像或視頻的方式，或者根本呈現媒體。單獨定義它們的問題是，您最終會獲得許多切換組件特徵的標誌，其中許多是相互排斥的。例如，如果也隱藏了保證金，則無法填補它的圖像。

對於我們團隊設計系統中的許多組件來說，這絕對是一個問題。有很多組件，布爾道具會使組件以各種奇怪而出乎意料的方式行事。在開發過程中，我們甚至在卡組件中彈出了各種錯誤，因為工程師不知道要打開哪些道具並以任何給定的效果關閉！

曼迪提供以下解決方案：

類型MediaMode ='hidend'| 'EdgetoEdge'| “全力”

接口props {
  MediaMode：“隱藏” | 'EdgetoEdge'| “全力”
}

簡而言之：如果我們將所有這些新生的選項結合在一起，那麼我們的API易於擴展，並且在將來引起混亂的可能性較小。

就是這樣！我只是想快速記下這兩個課程。這是我的問題：製作組件或在設計系統上工作時學到了什麼？

以上是我從製作React組件中學到的兩個課程的詳細內容。更多資訊請關注PHP中文網其他相關文章！