2015-03-13 112 views
2

何时修改反应类组件中的状态变量是可接受的,何时调用动作来更改状态变量?反应:动作与修改状态变量

最佳做法是什么?在反应类组件中更改状态变量是否违背了Flux约定?

+0

查看有关道具vs状态的React文档:http://facebook.github.io/react/docs/interactivity-and-dynamic-uis。html – 2015-03-14 15:34:57

回答

1

对这个问题没有正确的答案,因为它是上下文的,并且一般取决于你的代码。但是,从个人经验来看,我会敦促你不要使用状态变量。对于没有孩子的组件来说,这可能是可以接受的,但是在你的组件中最终还是会有很多逻辑,而这些逻辑并没有严格遵守表示(阅读:渲染)。我的观点:让你的状态和数据保持在商店中,让组件非常愚蠢,只处理渲染和执行操作。这种方法使应用程序更易于测试并确保可读性。

1

我会考虑使用在有问题的数据是局部的紧耦合组件的情况下组件状态,这意味着它是只有组件本身通过的任何其他部分需要不太相关未来应用。当然,你无法预测所有的东西,所以如果有疑问,最好把它看作'应用程序状态'并放入商店。

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

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

0

您应该只使用动作写入商店,因此如果您的状态是商店内容的直接表示形式,那么您应该只使用动作来更新它。这里有很多选项,但https://github.com/HubSpot/general-store带有一个mixin,它允许你直接将存储数据绑定到状态。

所以在你的组件,你可以这样做:

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

这将绑定的任何数据住在那家商店进入状态,当商店所以将你的组件状态更新。也有许多情况下,组件有像的地方国家一些位:

getInitialState: -> 
    modalOpen: false 

openModal: -> 
    @setState 
    modalOpen: true 

我遇到了,我想借此数据在商店不同步的一些情况,这样我可以保持跟踪变化和可能会进行重置并在用户保存之前列出对模型的更改,并且我通过直接复制存储模型并直接对其进行变更,然后在保存时使用操作来点击保存终结点,然后通过新保存的模型进入商店,这将更新本地(不同步)副本以及商店本身的主要真实来源。

+0

在你的第二个场景中,我想知道一个组件是不是应该将它的存储或其紧密绑定状态存储在单个存储中,例如var store = {....,myControlBar:{modalOpen:false},。 ..}。充其量这可以让事情变得简单,稍后有人会知道在哪里可以找到所有状态。 – 2015-03-28 12:04:01