我注意到有些人编写了一个返回一些 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”模式。我很好奇是否有首选的最佳实践方法。都可以吗?哪一种被认为是最佳实践?
最佳答案
我的观点;在企业级开发过 ReactJS 应用程序就是这样。
如果您将在其他地方再次渲染此内容 -> 组件
如果需要超过 7 个打开的 HTML/JSX 标签才能完成此操作 -> 组件
实际上,无论如何,所有这些代码最终都会在您的包中一遍又一遍地重复;但为了可维护性,组件通常是最好的选择。
作为另一个偏好问题;当涉及到调试时,我希望能够记下给我带来问题的组件名称,并直接转到具有该名称的文件进行调查......而不是尝试在具有完全模糊关系的文件中查找相关代码
例如“ListManager 有错误” -> 转到列表管理器,而不是“联系人”中的列表管理器出现错误,然后我必须挖掘联系人的源代码来查找列表代码。
就您的选项卡而言,如果我要编写一个“renderSomething”版本,则不会需要三次调用 renderTab。我将循环选项卡数组以对每个选项卡项进行调用。个人喜好也是一切的归结。
关于javascript - Reactjs 最佳实践。何时使用渲染函数与何时使用新组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48670789/