在审查或提出拉取请求时，我经常听到的一条反馈是：“将其移至单独的组件。”但我们应该这样做吗？什么时候才是正确的选择？这与永恒的开发人员争论有关：**“文件更少，行数更多”与“文件更多，行数更少。”**这就像挑选披萨配料一样——每个人都有自己的偏好，没有一种选择是普遍完美的。

一些开发人员喜欢将代码放在一起以简化流程，而另一些开发人员则喜欢将代码拆分成更小的组件，以提高清晰度和可重用性。最终，决定取决于平衡可读性、可维护性和代码库的未来性，确保您的团队（以及未来的自己）可以轻松使用它。

让我们深入研究一个实际场景。假设开发人员的任务是在仪表板页面上呈现小部件列表。以下是初始实现：

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

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

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

  return (
    

      
Dashboard
      

        {widgets.map((widget) => (
          

                  
{widget.title}
                  
{widget.description}
                  🗑️
                  ✎
          
        ))}
      
    
  );
}

在一次评审中，有人建议将渲染各个小部件的逻辑分离到各自的组件中。开发人员重构了代码如下：

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

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

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

  return (
    

      
Dashboard
      

        {widgets.map((widget) => (
          
        ))}
      
    
  );
}

// Widget component for individual widget
function Widget({ widget, onDelete, onUpdate }) {
  return (
    

      
{widget.title}
      
{widget.description}
       onDelete(widget.id)}>🗑️
       onUpdate(widget.id, "New Title")}>✏️
    
  );
}

// Can be even further moved to a separate file
// Widget.js
export default function Widget({ widget, onDelete, onUpdate }) {
  return (
    

      
{widget.title}
      
{widget.description}
       onDelete(widget.id)}>🗑️
       onUpdate(widget.id, "New Title")}>✏️
    
  );
}

最初的实现看起来不是更简单、更直接吗，特别是当其他逻辑（例如处理分析）与小部件紧密相关时，会导致 props 和上下文切换增加？👀 这就提出了一个重要的问题：仪表板组件应该采用哪种方法？它应该保留内联实现、采用重构结构还是选择混合方法？🤔

何时将组件保存在同一文件中

何时使用单独的文件

做出决定

对于此“DashBoard”示例，您的选择取决于项目的规模和组件的预期作用。由于这是一个 Widget 不会被重复使用的小示例，因此单个文件效果很好：

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

  const handleDelete = (id) => {};

  const handleUpdate = (id, newTitle) => {};

  return (
    

      
Dashboard
      

        {widgets.map((widget) => (
          

                  
{widget.title}
                  
{widget.description}
                  🗑️
                  ✎
        ))}
      
    
  );
}

对于较大或不断增长的项目，分离“Widget”在灵活性和可维护性方面将有益

关键要点

平衡“单个文件中的更多行”与“行数更少的更多文件”取决于项目的范围、团队规模和增长轨迹。在做决定时请考虑以下几点：

如果有人在 PR 审查期间建议将组件移至单独的文件，请仔细检查其好处是否与这些考虑相符。