可以说我有一个大型存储对象,每个组件只需要一小部分即可。管理每个组件内部状态的最佳实践是什么?
我考虑过的两种方法,要么将内部组件状态设置为我在componentDidMount()中所需的状态片,要么将const分配给render()中的切片。每个项目的收益/缺点是什么?它们都会在发生任何更改时进行更新,并且我的所有changeHandlers都会在商店中调用操作,而不是直接修改组件状态。只是非常具体,我正在使用mapStateToProps,只需要将切片分配给一些内部变量,因为访问切片需要一个object.map,我只希望每个组件都执行一次,而不是每次需要访问状态(如果我每次都可以做this.props.storeName.someProp.value的话)
设置为内部状态
class LoginPrimaryCell extends Component {
state = {
data: this.props.storeFeatures.data.find(element => element.feature === 'login').settings
}
componentDidMount() {
this.setState({ data: {...this.props.storeFeatures.data.find(element => element.feature === 'login').settings}})
}
handleChange = (event, name) => {
this.props.editFeature({feature: 'login', setting:'checkbox', value: event.target.checked}) //editFeature is an action on store
}
render() {
...rest of component...
分配给const
class LoginPrimaryCell extends Component {
handleChange = (event, name) => {
this.props.editFeature({feature: 'login', setting:'checkbox', value: event.target.checked}) //editFeature is an action on store
}
render() {
const data = {...this.props.storeFeatures.data.find(element => element.feature === 'login').settings}
}
我正在寻找的是针对这种情况的最佳实践,以及每种方法的优点/缺点是什么。或者,如果几乎没有区别,那全是个人喜好。谢谢!
理想情况下,过滤/查找元素的最佳位置是memoized
在mapStateToProps中使用选择器,而不是将整个数据传递到组件并在其中进行过滤,除非您要在react组件的状态内设置的条件下进行过滤。
但是,如果在某些情况下要在组件内进行过滤,则需要使用备忘功能在render方法内完成此操作,因为如果在连续渲染上传递相同的参数并且不需要处理道具或过滤器在其他任何位置发生变化。
将过滤后的数据设置为状态不是一个非常正确的解决方案,因为您将不会经常更新此状态,而且,当storeFeatures
道具或过滤条件发生变化时,您将需要更新此状态,这有点麻烦
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句