更少的檔案、更多的行與更多的檔案、更少的程式碼行

啊，經典的開發者辯論：**「更少的文件，更多的行」與「更多的文件，更少的行」。這就像選擇披薩配料一樣——每個人都有自己的偏好，但沒有人能完全滿意。

在組織拉取請求 (PR) 的程式碼時，有些人喜歡將內容保留在一個地方的簡單性，而有些人則喜歡將其分解為較小的、集中的文件。

最終，這不僅僅是關於你，而是為了拯救你和你的團隊的未來，讓他們免於日後理清混亂的程式碼庫。

讓我們深入研究一個實際場景。想像一下，開發人員的任務是在儀表板頁面上呈現小工具清單。這是最初的實作：

// Dashboard.js
export default function Dashboard() {
 const widgets = getWidgets();

  // Handles widget deletion
  const handleDelete = (id) => {};

  // Handles widget title update
  const handleUpdate = (id, newTitle) => {};

  return (
    <div>
      <h1>Dashboard</h1>
      <div className="widget-container">
        {widgets.map((widget) => (
          <div className="widget">
                  <h2>{widget.title}</h2>
                  <p>{widget.description}</p>
                  <span onClick={handleDelete}>?️</span>
                  <span onClick={handleUpdate}>✎</span>
          </div>
        ))}
      </div>
    </div>
  );
}

在審查過程中，有人建議將渲染各個小部件的邏輯分離到它們自己的元件中。開發者重構程式碼如下：

// Dashboard.js
export default function Dashboard() {
  const widgets = getWidgets();

  // Handles widget deletion
  const handleDelete = (id) => {};

  // Handles widget title update
  const handleUpdate = (id, newTitle) => {};

  return (
    <div>
      <h1>Dashboard</h1>
      <div className="widget-container">
        {widgets.map((widget) => (
          <Widget
            key={widget.id}
            widget={widget}
            onDelete={handleDelete}
            onUpdate={handleUpdate}
          />
        ))}
      </div>
    </div>
  );
}

// Widget component for individual widget
function Widget({ widget, onDelete, onUpdate }) {
  return (
    <div className="widget">
      <h2>{widget.title}</h2>
      <p>{widget.description}</p>
      <button onClick={() => onDelete(widget.id)}>?️</button>
      <button onClick={() => onUpdate(widget.id, "New Title")}>✏️</button>
    </div>
  );
}

// Can be even further moved to a separate file
// Widget.js
export default function Widget({ widget, onDelete, onUpdate }) {
  return (
    <div className="widget">
      <h2>{widget.title}</h2>
      <p>{widget.description}</p>
      <button onClick={() => onDelete(widget.id)}>?️</button>
      <button onClick={() => onUpdate(widget.id, "New Title")}>✏️</button>
    </div>
  );
}

最初的實作是不是看起來更簡單、更直接，特別是當額外的邏輯（例如處理分析）與小部件緊密相關時，導致增加了 props 和上下文切換？ ？這就提出了一個重要的問題：儀表板組件該採用哪一種方法？應該保留內聯實作、採用重構結構還是選擇混合方法？ ？

---

何時將組件保留在同一文件中

1. 小型專案或單一職責：
   • 如果 DashBoard 組件與 Widget 組件緊密耦合，並且您的項目很小，那麼將它們放在一起可以減少不必要的複雜性。
2. 可重複使用性不太可能：
   • 當 Widget 元件不會在其他地方重複使用時，將其分離幾乎沒有好處。
3. 可讀性：
   • 對於較小的元件，單一檔案可以更輕鬆地理解元件之間的關係，而無需上下文切換。
4. 避免開銷：
   • 內嵌元件消除了額外的匯入/匯出語句，減少了簡單設定中的樣板程式碼。

---

何時使用單獨的文件

1. 可重複使用性：
   • 如果 Widget 元件可能在其他地方使用，則單獨的檔案可以使其更易於存取和管理。
2. 程式碼可讀性與組織：
   • 隨著文件變得越來越大，將它們分成更小的邏輯部分可以改善導航並減少認知負荷，特別是在較大的項目中。
3. 測試與維護：
   • 單獨文件中的獨立元件更容易進行單元測試，從而實現更好的測試覆蓋率和可維護性。
4. 關注點分離：
   • 遵循單一職責原則，單獨的文件確保每個組件都有明確、獨特的用途——這對於長期可維護性至關重要。
5. 可擴充性：
   • 將元件分解為單獨的檔案可確保程式碼庫隨著專案的成長保持可管理性，從而能夠在不破壞現有功能的情況下無縫添加新功能

---

做出決定

對於這個 DashBoard 範例，您的選擇取決於專案的規模和組件的預期角色。由於這是一個小範例，Widget 不會被重複使用，因此單一檔案可以很好地工作：

// Dashboard.js
export default function Dashboard() {
 const widgets = getWidgets();

  // Handles widget deletion
  const handleDelete = (id) => {};

  // Handles widget title update
  const handleUpdate = (id, newTitle) => {};

  return (
    <div>
      <h1>Dashboard</h1>
      <div className="widget-container">
        {widgets.map((widget) => (
          <div className="widget">
                  <h2>{widget.title}</h2>
                  <p>{widget.description}</p>
                  <span onClick={handleDelete}>?️</span>
                  <span onClick={handleUpdate}>✎</span>
          </div>
        ))}
      </div>
    </div>
  );
}

對於較大或不斷增長的項目，分離 Widget 將有利於靈活性和可維護性

重點

平衡「單一文件中的更多行」與「更少行的更多文件」取決於專案的範圍、團隊規模和成長軌跡。做出決定時請考慮以下因素：

• 組件有可能被重複使用嗎？
• 父檔有多複雜？
• 專案是否遵循慣例或特定的設計模式？
• 程式碼庫會隨著時間的推移而大幅擴展嗎？

如果有人建議在 PR 審核期間將元件移至單獨的文件，請仔細檢查其好處是否符合這些考慮因素。

以上是更少的檔案、更多的行與更多的檔案、更少的程式碼行的詳細內容。更多資訊請關注PHP中文網其他相關文章！