反应：父母还是孩子？如何确定放置组件的位置？

Question

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

例如，列表组件（父级）包含许多 SingleListItem 组件（子组件）。当用户单击 SingleListItem 组件时，将弹出对话框组件。我应该将对话组件放置为列表或 SingleListItem 的子组件吗？

如果我错了，请纠正我：

• 如果我将对话组件作为列表的子组件，列表组件可能变得非常笨重 - 列表组件可能包含不同类型的ListItem组件（ SingleListItemFoo ， SingleListItemBar ...），每个ListItem组件可能都有自己特定的Dialog组件（ DialogFoo ， DialogBar ...）。
• 如果我将对话组件作为子组件 SingleListItem ，每个 SingleListItem 都包含 Dialog 组件。如果列表中有1000个 SingleListItem ，则额外内容可能会使应用变慢。

Answer 1

我的第一个倾向是根据
确定谁是对话框（list或listitem）的父级 的 一个。定位 对话框：

• 如果对话框相对于listitem定位（例如，像带有选项的下拉列表） - 那么将对话框设为listitem的子项更有意义。
• 如果对话框相对于父对象定位（例如，您确定要删除类型的模态） - 那么对话框作为父级的子对象更有意义。

并且在 的 湾对话框的效果 ：

• 如果对话框结果仅影响单个列表项，而无需完全重新呈现列表（例如，更改listitem的颜色，存储在反应状态中） - 那么对话框作为listitem的子项更有意义
• 如果对话框结果可能触发重新呈现列表（例如删除或重新排序项目），则对话框作为列表的子项更有意义。

列表或列表项选择与其他点相比没有区别：

• 如果只有一种对话框，您只需定义一次对话框。并且您只渲染对话框一次（从列表中，或从需要渲染对话框的1个列表项）。
• 如果你有更多的味道，如dialogBar和dialogFoo，这在列表或listitem中同样笨重。

关于代码量，也没有区别：

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

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

希望这有帮助。