reactjs - React : Parent or child? 如何决定将组件放置在哪里？

Question

使用 React 进行开发时，通常存在与父组件及其子组件相关的组件。我总是很难决定应该把这种类型的组件放在哪里。

例如，List 组件(父级)包含许多 SingleListItem 组件(子级)。当用户点击SingleListItem组件时，会弹出一个Dialog组件。我应该将 Dialog 组件放置为 List 或 SingleListItem 的子组件吗？

如有错误，请指正:

• 如果我将 Dialog 组件放置为 List 的子组件，List 组件可能会变得非常庞大 - 一个 List strong> 组件可能包含不同类型的 ListItem 组件(SingleListItemFoo、SingleListItemBar...)，并且每个 ListItem 组件可能有其自己特定的 Dialog 组件(DialogFoo)强>，<强>对话框 ...)。
• 如果我将 Dialog 组件放置为SingleListItem，每个SingleListItem将包含一个Dialog组件。如果List中有1000个SingleListItem，额外的内容可能会使应用程序变慢。

Answer 1

我的第一个倾向是根据
来决定谁是对话框的父级(列表或列表项)a。对话框的定位:

• 如果对话框相对于列表项定位(例如，带有选项的下拉菜单)，那么将对话框设置为列表项的子项更有意义。
• 如果对话框相对于父级定位(例如，您确定要删除模式的删除类型)-那么将对话框作为父级的子级更有意义。

还有
b.对话框的效果:

• 如果对话框结果仅影响单个列表项，而不需要完全重新渲染列表(例如更改列表项的颜色，存储在 react 状态中) - 那么将对话框作为列表项的子项更有意义
• 如果对话结果可能会触发列表的重新呈现(例如删除或重新排序项目)，则将对话框作为列表的子项更有意义。

列表或列表项选择与您的其他观点没有区别:

• 如果只有 1 种对话框，则只需定义一次对话框。并且您只需渲染一次对话框(无论是从列表中，还是从需要渲染对话框的 1 个列表项)。
• 如果您有更多风格，例如dialogBar和dialogFoo，那么无论是在列表中还是在列表项中，它也同样庞大。

至于代码量，也没有区别:

• 您有 1 个列表代码集、1 个对话框代码集以及 1 个列表项代码集。如果您渲染 1000 个列表项，您的代码集不会被复制 1000 次。
• 如果您有例如触发对话框的 10 行代码，这 10 行需要放在 listitem.js 文件中，或者放在 list.js 文件中。

唯一的区别是:如果将对话框放入 listitem 中，则评估是否显示对话框的代码将被执行 1000 次。但实际上不可能使这种评估效率低到足以注意到任何差异。即使有1000行。正如所指出的，如果 1000 行不适合屏幕，则会有许多其他原因不渲染它们。

希望这有帮助。