React：动作与修改状态变量答案

【问题标题】：React: Action vs modifying state variableReact：动作与修改状态变量
【发布时间】：2015-05-16 08:12:46
【问题描述】：

什么时候可以修改 React 类组件中的状态变量，什么时候可以调用一个动作来改变状态变量？

最佳做法是什么？更改 React 类组件中的状态变量会违反 Flux 约定吗？

【问题讨论】：

查看关于 props 与状态的 React 文档：facebook.github.io/react/docs/…

【解决方案1】：

您应该只使用操作来写入存储，因此如果您的状态可以直接表示存储中的内容，那么您应该只使用操作来更新它。有很多选择，但https://github.com/HubSpot/general-store 带有一个 mixin，可以让你将存储数据直接绑定到状态。

所以在您的组件中，您可以执行以下操作：

mixins: [
    GeneralStore.StoreDependencyMixin({
      user: UserStore.get()
    })
]

这会将存储在该存储中的任何数据绑定到状态，当存储更新时，您的组件也会状态。在很多情况下，组件都有一些本地状态，例如：

getInitialState: ->
  modalOpen: false

openModal: ->
  @setState
    modalOpen: true

我遇到了一些情况，我想使存储中的数据不同步，以便我可以跟踪更改并可能进行重置并在用户保存之前列出对模型的更改以及我的方式这样做是通过jsut复制状态中的商店模型并直接对其进行变异，然后在保存时使用一个操作来点击保存端点，然后将新保存的模型传递到商店中，这将更新本地（不同步）副本和商店本身的主要真相来源。

【讨论】：

在第二种情况下，我想知道一个组件是否不应该只将其存储或其紧密绑定的状态存储在单个存储中，例如 var store = { .... , myControlBar : { modalOpen: false}, ... }。充其量这会使事情变得简单，以后有人会知道在哪里可以找到所有状态。

【解决方案2】：

我会考虑在相关数据被本地化并与组件紧密耦合的情况下使用组件状态，这意味着它仅与组件本身相关并且不太可能需要将来由应用程序的任何其他部分。当然，您无法预测所有内容，因此如果有疑问，最好将其视为“应用程序状态”并将其放入 Store。

表单输入是可能适用的一种情况。例如，典型用户注册或登录表单的输入字段的瞬态不太可能与应用程序的其他部分相关。数据仅用于渲染组件本身和进行提交数据的 API 调用，因此很自然地将表单的状态视为 表单的一部分，并使用组件状态来存储它。

一个反例是动态搜索的输入，它在单独的组件中过滤列表，其中列表应在用户开始键入时立即开始响应。在这里，输入的瞬态应该被认为是应用程序状态，并保存在其他组件可以访问的 Store 中。

【讨论】：

【解决方案3】：

这个问题没有正确答案，因为它是上下文相关的，并且在很大程度上取决于您的代码。但是，根据个人经验，我会敦促您不要使用状态变量。这在没有子组件的组件中可能是可以接受的，但最终仍然很容易在您的组件中拥有大量与呈现无关的逻辑（阅读：渲染）。

我的意见：将你的状态和数据保存在存储中，让组件变得非常愚蠢，只处理渲染和执行动作。这种方法使应用更易于测试并确保可读性。

【讨论】：