具有单独视图和数据模型的场景的状态vs道具

时间:2018-04-17 16:30:02

标签: reactjs

我正在构建一个应用程序,我希望为相同的数据提供单独的视图。

在我目前的实施中,数据是通过网络服务调用获得的,并保存在state的{​​{1}} App组件中。 App.js组件托管(呈现)另一个名为App的组件,该组件充当StackEditor组件中this.state.components的视图。

App呈现的UI元素可以移动,并同步StackEditor的{​​{1}}我按照以下方式执行:

state

App我更新<StackEditor components={this.state.components} onLocationChanged={this.handleLocationChanged} />

handleLocationChanged

由于state现已更新,因此会强制再次呈现handleLocationChanged(e, data) { this.setState(prevState => { // event data copied to state here return {components: prevState.components}; }); } ,因为其属性stateStackEditor绑定为components(请参阅上面的代码片段。)

这一切都有效,但现在我开始质疑我是否做得对。

Q1:我应该使用state代替components={this.state.components}吗?

组件的位置似乎原则上是变异的,尽管从state的角度来看,它是不可变的(我可以决定更改是无效的,而不是更新事件监听器中的props

Q2:是否可以在React中分享2个组件之间的部分状态?

如果我以某种方式将StackEditor转换为从state而不是StackEditor获取组件,我是否会收到父组件中子组件(state)更改状态的通知(props)?

问题3:另外,StackEditor使用App一般比props更方便吗?

当我按照HOC指南(https://reactjs.org/docs/higher-order-components.html)创建另一个组件时,我发现state很容易转发到&#34;包裹&#34;组件,但不是props。如果我提供一个通过属性回调的功能(就像我上面所做的那样),&#34;包裹&#34;组件可以轻松地调用它,甚至不会注意到它已经包裹了#34;。我不知道如何轻易地通知&#34;包裹&#34;关于state的组件更改了&#34;包装器&#34;,而没有编写额外的代码。

1 个答案:

答案 0 :(得分:2)

如果您将应用程序想象成一个设计良好的应用程序中的组件树,它通常是这样的:

  • leafs 是无状态组件。他们决定如何呈现数据
  • 节点是有状态组件。他们决定要呈现的组件和数据
  

Q1:我应该使用州而不是道具吗?

这取决于您拥有的组件类别(节点或叶子)。

  

Q2:是否可以在2个组件之间共享部分状态   反应?

如果您觉得您的应用程序有很多状态变异并且需要被遍布在树上的多个组件使用,那么您通常会开始引入外部状态管理库(例如redux)。组件可以订阅您的商店并成为无状态,因为您的商店现在处理状态。

  

问题3:另外,道具比一般状态更方便使用吗?

他们解决了不同的问题,所以你不能这么说。无状态组件通常更容易理解,但无法控制任何内容。

另请阅读Identify where your state should liveWhen to use redux

所有这一切只是经验法则。很多时候,您将拥有同时拥有stateprops的组件,因为它们会控制您应用的部分内容,但会将其他部分委托给他们的孩子。

  

这一切都有效,但现在我开始质疑我是否做得对。

从我提供的代码中我可以看到,这看起来非常像。