Facebook 识别 UI 状态最小表示的标准：我们需要所有这些还是只需要一个就足够了？答案

【问题标题】：Facebook criteria to identify the minimal representation of UI state: do we need all of them or just one is enough?Facebook 识别 UI 状态最小表示的标准：我们需要所有这些还是只需要一个就足够了？
【发布时间】：2018-01-08 23:10:48
【问题描述】：

Facebook 文章“Thinking in React”（我之所以不粘贴链接只是因为我忽略了发布外部链接是否违反规则）描述了三个主要标准，我们可以使用这些标准来确定UI 应该是有状态的。

这些是标准，或者更好的是，对每条数据提出的问题：

它是通过 props 从父级传入的吗？如果是这样，它可能不是状态。
它会随着时间的推移保持不变吗？如果是这样，它可能不是状态。
你能根据你的任何其他状态或道具计算它吗？零件？如果是这样，它就不是状态。

由于文章中没有明确表达，我想知道，在您看来，如果所有这些问题/点都得到满足，或者这些问题/点中的至少一个是满意。

谢谢（请原谅我的英语，这不是我的母语）

【问题讨论】：

这些只是经验法则，并不是一成不变的，但如果您发现自己以“是”回答其中一个或多个问题，则可能不是状态。这就是他们的意思。所以回答你的问题：只有其中一个就足够了。顺便说一句，link this article 并不违反规则。事实上，它是官方文档的一部分，而不是文章。

标签： reactjs

【解决方案1】：

根据我的经验，这些经验法则非常合理 - 如果一条数据满足任何条，则很可能它不是一个状态。

以下是我对每个标准的看法：

它是通过 props 从父级传入的吗？如果是这样，它可能不是状态。

一个可能的例外（这是一个延伸）是当状态的默认值通过道具传递时：

constructor(props) {
  super(props);

  this.state = {
    value: props.defaultValue || ''
  };
}

但是，我认为这是一种不好的做法。这是因为在创建组件实例之后，默认值就已经确定了。相反，更好的方法是在每次渲染时推断实际值：

constructor(props) {
  super(props);

  this.state = {
    value: ''
  };
}

getValue() {
  return this.state.value || this.props.defaultValue;
}

它会随着时间的推移保持不变吗？如果是这样，它可能不是状态。

嗯，根据定义，状态是可以改变的东西。否则，它是一个常数，应该这样对待。

您可以根据组件中的任何其他状态或道具来计算它吗？如果是这样，它就不是状态。

这是一个有趣的问题。将一些计算值保留在状态中可能很诱人，尤其是在上述计算很昂贵的情况下（例如，对列表进行排序等）。然而，我们所做的是缓存计算结果，这不是状态的工作。

我对此的看法是重新计算，直到遇到一些性能问题。发生这种情况时，您可以使用 reselect 等库。（注：它说它适用于 Redux，但我很确定它可以在 Redux 之外使用。）

【讨论】：