UI状态和应用程序状态的边界

Question

我很难找到所谓的"UI State"的边界。

想象一个问题跟踪器的例子：

我们有一个“发行卡”列表，每个列表包含：

1. 代表进度（即打开，关闭）的简单图标
2. 问题的描述文字（一个简单的<p/>元素）
3. 一个单个操作按钮，可更改d =取决于问题的状态：“分配给我自己”或“标记为完成”。
4. 打开上下文菜单（又称右键菜单）的按钮。该菜单包含各种操作按钮的列表。取决于 状态，某些操作显示为灰色，因此无法单击/或 只是没有显示。如果案例已经结案，则类似于“结案”。

如果您可以将这些项目分别归类为UI状态和应用程序状态，那么这将有助于我理解边界。

更实际：如何将这个小示例应用程序划分为containers and presentational components？

我的解释：1.和2.只是陈述性的，3.和4.是有状态的。这是正确的吗？如何将其构造为容器和组件？

非常感谢您！

Answer 1

所有列出的示例都是应用程序状态的示例，其中UI由从后端接收的持久性数据确定。

UI状态通常是指由用户操作（例如，窗口位置，活动选项卡，未提交的表单值等。视情况而定，UI状态可能会升高并存储在某个位置（永久存储或URL）或被丢弃。

Answer 2

如果我想实施这个项目，我会像这样：

1. 用于管理所有子组件的组件
2. 用于管理模型，数据和字段的商店
3. 用于显示图标，说明文字和按钮的组件
4. 上下文菜单组件

请考虑，如果您使用的是MVVM模式，请确保操作的所有职责均由存储完成，并且要更改某些属性，请使用observable字段 如果不使用状态，则在管理器组件中使用状态，并通过子项中的props传递。