更少的文件、更多的行与更多的文件、更少的代码行

啊，经典的开发者辩论：**“更少的文件，更多的行”与“更多的文件，更少的行”。这就像选择披萨配料一样——每个人都有自己的偏好，但没有人能完全满意。

在组织拉取请求 (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中文网其他相关文章！