Question

可以说我有一个大型存储对象，每个组件只需要一小部分即可。管理每个组件内部状态的最佳实践是什么？

我考虑过的两种方法是将内部组件状态设置为我在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}
}

我一直在寻找的是针对这种情况的最佳实践，以及每种方法的优点/缺点是什么。或者，如果几乎没有区别，那全是个人喜好。谢谢！

Answer 1

理想情况下，过滤/查找元素的最佳位置是在mapStateToProps中使用memoized选择器，而不是将整个数据传递到组件并在其中进行过滤，除非您要在设置的条件下进行过滤在反应组件的状态之内。

但是，如果您想在组件中进行过滤，则需要使用备忘功能在render方法中完成，因为如果在连续渲染中传递相同的参数并且不需要这样做，它将避免计算在其他任何地方处理道具或更换滤镜。

将过滤后的数据设置为状态不是一个非常正确的解决方案，因为您不会经常更新此状态，而且，当storeFeatures属性或过滤条件发生变化时，您将需要更新此状态。都有点麻烦

在组件内部使用redux状态的最佳实践是什么？

1 个答案: