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

Question

我注意到有些人编写了一个返回一些 jsx 的“renderSomething”方法。这个 renderSomething 方法是在 React 组件的实际 render() 中调用的。

像这个简单的例子:

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>
    );
}

通常我会将 renderSomething 提取到它自己的组件中:

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

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

Answer 1

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

如果您将在其他地方再次渲染此内容 -> 组件

如果需要超过 7 个打开的 HTML/JSX 标签才能完成此操作 -> 组件

实际上，无论如何，所有这些代码最终都会在您的包中一遍又一遍地重复；但为了可维护性，组件通常是最好的选择。

作为另一个偏好问题；当涉及到调试时，我希望能够记下给我带来问题的组件名称，并直接转到具有该名称的文件进行调查......而不是尝试在具有完全模糊关系的文件中查找相关代码

例如“ListManager 有错误” -> 转到列表管理器，而不是“联系人”中的列表管理器出现错误，然后我必须挖掘联系人的源代码来查找列表代码。

就您的选项卡而言，如果我要编写一个“renderSomething”版本，则不会需要三次调用 renderTab。我将循环选项卡数组以对每个选项卡项进行调用。个人喜好也是一切的归结。