可能的React Antipattern:从props设置初始状态

时间:2015-11-06 01:17:24

标签: javascript reactjs

我已经对此有所了解,但没有得到满意的答复。当然,我对React来说很新。

假设我有两个组件ParentChildParent将属性传递给ChildChild希望将状态设置为该属性,如下所示:

// in child
getInitialState: function() {
  return ({
    filters: this.props.filters
  });
}

然后,通过用户界面修改this.state.filters,点击"保存"某种按钮,通过存储/调度程序将更新的过滤器通过类似Flux的模型保存到Parent,然后重新呈现并向下传播更新的this.props.filters到{{1再次。这有点愚蠢,因为Child已经在其状态中具有更新的数据,但无论如何。

为了检查" Save"按钮应该处于活动状态,我会在Child中检查:

Child

如果它们不相等,则状态已从原始默认道具更改。因此," Save"按钮被激活。否则,状态与原始默认道具相同,并且" Save"按钮被禁用。

我的问题是,这种流程是反模式吗?似乎一定是。

1 个答案:

答案 0 :(得分:2)

在组件中,您想知道是否已从上一个已知值修改了值。这种方法对我来说很合理。显然还有其他方法可以做到这一点,但我认为这种方法没有任何问题。

关于此:“...通过存储/调度程序将更新的过滤器通过类似Flux的模型保存到父级。”可以把它想象成逐步退出渲染流程并进入应用程序中的状态更新流程。通量模式的单向性质可以更多一些类型,但从长远来看会导致更易于管理的代码(例如,如果多个组件需要更新状态)。

你是对的,Child已经有了即将成为官方的州,很快就会再次从Parent收到propsChild可以/应该根据新状态进行渲染,即使它尚未保存到服务器 - 这称为乐观更新https://facebook.github.io/react/docs/tutorial.html#optimization-optimistic-updates

只要在render收到新Childprops组件中Parent方法的输出没有变化,React就不会告诉浏览器重新渲染DOM。这意味着您的UI会呈现您想要的状态,但会更快地完成。