我什么时候应该创建一个新的React组件？

Question

我应该何时创建一个新的React组件，而不是在同一组件中定义一个辅助函数？

在教程中，我通常会看到这样定义的组件“ StuffList”：

StuffList = ({ list }) => {
    const renderItem = item => {
        return <div>{item}</div>
    }
    return list.map(item => renderItem(item))
}

上面的示例确实很简单，但是对于列表和项目，复杂性可能会增加很多。因此，我想知道什么是应该将Item提取到其自身组件中的良好指示符？我不仅在谈论列表和项目，而且这只是想到的最简单的例子。

Answer 1

您可能已经猜到这取决于。但是，从现有组件中提取新组件可以视为Extract Function重构的一种变体。用强烈推荐的Refactoring书中的马丁·福勒（Martin Fowler）来解释何时使用此重构：

  

如果您需要花大量精力查看一段代码并弄清 在做什么，那么您应该将其提取到 function 组件，并在“内容”之后命名功能 组件。

这里的其他潜在好处是能够重用新组件，减小原始组件的大小（即代码行），并且在使用React的情况下 可以帮助改善渲染性能。 >

编辑：另请参阅Kent C Dodds When to break up components into multiple components的这篇文章。