react-native - 接続時にネイティブ アプリのパフォーマンスに反応する(mapStateToProps、mapDispatchToProps)

Question

Redux 状態管理を使用して反応ネイティブ アプリを作成しています。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 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 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

私の質問は、

1. アプリのパフォーマンスを考慮すると、どのようなアプローチが最適でしょうか?
2. 同様に同じアプローチを使用できますmapDispatchToPropsか?