在 connect(mapStateToProps, mapDispatchToProps) 上反应本机应用程序性能

如何解决在 connect(mapStateToProps, mapDispatchToProps) 上反应本机应用程序性能

我正在创建带有 redux 状态管理的 React Native 应用程序。我想知道使用 connect(mapStatetoProps,mapdispatchToProps) 的最佳做法是什么。

我有几个组件类，即 ParentA、ChildA、ChildB。目前我正在独立获取每个父类和子类的状态属性。

例如：

const ParentA = (props) => {
  return (
    <View>
      <Text>{props.item.name}</Text>
      <ChildA />
      <ChildB />
    </View>
  )
}

const mapStatetoProps = (state) => {
  const { item } = state

  return {
    item: item.item,}
}

export default connect(mapStatetoProps)(ParentA)

const ChildA = (props) => {
  return (
    <View>
      <Text>{props.item.name}</Text>
    </View>
  )
}

const mapStatetoProps = (state) => {
  const { item } = state

  return {
    item: item.item,}
}

export default connect(mapStatetoProps)(ChildA)

const ChildB = (props) => {
  return (
    <View>
      <Text>{props.item.age}</Text>
    </View>
  )
}

const mapStatetoProps = (state) => {
  const { item } = state

  return {
    item: item.item,}
}

export default connect(mapStatetoProps)(ChildB)

而是为每个子组件设置 connect，我可以从 item 获取 ParentA 状态并将其传递给 Child 组件。

例如：

const ParentA = (props) => {
  return (
    <View>
      <Text>{props.item.name}</Text>
      <ChildA item={item}/>
      <ChildB item={item}/>
    </View>
  )
}

const mapStatetoProps = (state) => {
  const { item } = state

  return {
    item: item.item,}
}

export default ChildA

const ChildB = (props) => {
  return (
    <View>
      <Text>{props.item.age}</Text>
    </View>
  )
}

const mapStatetoProps = (state) => {
  const { item } = state

  return {
    item: item.item,}
}

export default ChildB

我的问题是，

考虑应用性能的最佳方法是什么？
我也可以对 mapdispatchToProps 使用相同的方法吗？

解决方法

是的，您可以使用 useSelector,useDispatch 但问题是您应该使用钩子。使用这种方法可以解决应用性能问题。

我认为与其使用“const”，不如尝试另一种数据类型，例如“var”或“let”，因为“const”值一旦固定就无法更改。