如何讓 React 組件更可重用？

Question

過去一個月我一直在學習 React 並且一直在做一個項目，但我開始意識到我的組件不一定是“可重用的”。 我知道可重用性是 React 的一個重要概念，但我不知道如何簡化我的組件。

例如，我有一個使用 react-beautiful-dnd 的 To-Do 應用程序，它包含三個組件：DragDropContext、Droppable 和 Draggable。 整個應用程序現在包含四個組件：主 App 組件將數據傳遞到三個 react-beautiful-dnd 組件。 到目前為止，這非常簡單且可重復使用。

現在，我想為每個任務添加一個信息按鈕，當用戶單擊該按鈕時，會顯示第五個組件，信息。 為此，我需要向 Draggable 組件添加邏輯。 接下來我想添加一個功能，允許我從列表中添加/刪除任務。 為此，我需要修改 DragDropContext 或 Droppable 組件，以防止它呈現選定的 Draggable 任務。

在這一點上，曾經是可重用的組件現在是專門的。 這是我目前項目的一個極其簡化的版本。 我有相同的待辦事項列表，但有 10 多個組件需要相互通信，這使得它們都不能在這個項目之外重用，而無需大量修改每次使用的代碼。 是否有一些我遺漏的大概念，或者是這樣嗎？

Answer 1

如果不查看具體的設計決策，很難准確地判斷問題是什么，但反應哲學的基石是使組件不僅可以在一個團隊擁有的特定項目中重用，甚至可以在從事不同項目的不同團隊中重用。

React 通過其declarative programming風格實現了這一點，這基本上意味着 - 在反應組件的 scope 中 - 組件的行為方式僅基於傳遞給它的道具。 這就是為什么 react 總是鼓勵你不要訪問組件內部的 dom。

話雖如此，react 通過執行聲明式編程的syntax through framework ，您仍然必須確保在與 react 哲學保持一致的同時按預期使用該syntax - 我的意思是您仍然可以擁有正確的語法，但是尚未與反應哲學保持一致。

要使某個組件可重用，需要做很多事情，從它自己的組件名稱到道具的名稱，以及許多其他超出一個堆棧溢出答案的 scope 的事情。 但是為了制作可重用組件要記住的重要一點是，可重用組件是轉儲的，它們根本不與外部世界耦合，即使您的應用程序是第一個消費者，也可能是它們的唯一消費者。 換句話說，你必須創建兩種類型的組件，智能和轉儲，智能組件應該處理與業務邏輯、數據獲取等相關的事情......而轉儲組件只是 ui 組件，它們的行為可以很容易地被基於他們的道具所期待。