我正在构建一个应用程序,我希望为相同的数据提供单独的视图。
在我目前的实施中,数据是通过网络服务调用获得的,并保存在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};
});
}
,因为其属性state
与StackEditor
绑定为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;,而没有编写额外的代码。
答案 0 :(得分:2)
如果您将应用程序想象成一个设计良好的应用程序中的组件树,它通常是这样的:
Q1:我应该使用州而不是道具吗?
这取决于您拥有的组件类别(节点或叶子)。
Q2:是否可以在2个组件之间共享部分状态 反应?
如果您觉得您的应用程序有很多状态变异并且需要被遍布在树上的多个组件使用,那么您通常会开始引入外部状态管理库(例如redux
)。组件可以订阅您的商店并成为无状态,因为您的商店现在处理状态。
问题3:另外,道具比一般状态更方便使用吗?
他们解决了不同的问题,所以你不能这么说。无状态组件通常更容易理解,但无法控制任何内容。
另请阅读Identify where your state should live和When to use redux。
所有这一切只是经验法则。很多时候,您将拥有同时拥有state
和props
的组件,因为它们会控制您应用的部分内容,但会将其他部分委托给他们的孩子。
这一切都有效,但现在我开始质疑我是否做得对。
从我提供的代码中我可以看到,这看起来非常像。