Javascript 最佳实践。何时使用渲染函数与何时使用新组件

我注意到有些人编写了一个renderSomething方法，返回一些jsx。此renderSomething方法在react组件的实际渲染中调用

类似于以下简单示例：

renderTab(title, isVisible) {
    return (
        <div>
            ... some html/jsx that uses title and isVisible
        </div>
    );
}

render() {
    return (
        <div>
            {this.renderTab('Tab 1', true)}
            {this.renderTab('Tab 2', true)}
            {this.renderTab('Tab 3', false)}
        </div>
    );
}

通常，我会将渲染结果提取到它自己的组件中：

render() {
    return (
        <div>
            <Tab title='Tab 1' isVisible=true />
            <Tab title='Tab 2' isVisible=true />
            <Tab title='Tab 3' isVisible=false />
        </div>
    );
}

---

我认为将其提取到自己的组件中可以更容易地进行测试，并且与react的组件方法很好地配合，但我一直从多个人那里看到这种渲染模式。我很好奇是否有一个首选的最佳实践方法。两个都可以吗？哪一种被认为是最佳实践

我的观点；在企业级开发ReactJS应用程序就是这样

如果要在其他地方再次呈现此内容->组件

如果需要打开7个以上的HTML/JSX标记才能完成此->组件

现实地说，所有这些代码最终都会在包中反复出现；但是为了便于维护，组件通常是最好的方式

作为另一个优先事项；当谈到调试时，我希望能够注意到给我带来问题的组件名称，并直接前往具有该名称的文件进行调查……而不是试图在一个关系完全模糊的文件中查找相关代码

e、 g.ListManager有一个错误->转到列表管理器，而联系人中的列表管理器有一个错误，我必须在联系人源代码中查找列表代码

---

在你的标签中，如果我要写一个renderSomething版本，它不会有三个renderTab调用。我将循环tabs数组，以调用每个选项卡项。个人偏好也可以归结为个人偏好。

这是个人偏好，主要由懒惰决定。只向当前组件类添加另一个方法比创建新文件快。如果组件只在代码中的一个位置使用，我看不出将其移动到新文件中有什么好处，尤其是如果它是一小块代码。在这方面，使用函数也没有什么意义。我可能只是把它放在原处，不需要浪费时间来做一个一次性使用的抽象。