Реагировать на нативный рендеринг всех компонентов, включая дочерние

Question

Я хочу переопределить некоторые конкретные дочерние компоненты, когда состояние редукции изменилось, так что, как решить эту проблему

, вот мой код:

    <ItemMiniCard
  itemName={prop.item}
  price={prop.price}
  onPressAdd={() => { this.props.addCartItem(prop.id) }}
  onPressRemove={() => { this.props.removeCartItem(prop.id) }}
  />

в этом пункте Мини-карта имеет некоторыедругие дочерние компоненты

    <View style={{ flex: 1, marginLeft: 5 }}>
        <Text numberOfLines={1} style={[styles.itemText, { padding: 0 }]}>{itemName}</Text>
        <Text numberOfLines={1} style={[styles.descriptionText, { padding: 0 }]}>Delicius food rice and curry tasty food</Text>
        <View style={{ flexDirection: 'row', justifyContent: 'space-between', }}>
            <Text numberOfLines={1} style={[styles.priceTextBold, { padding: 0 }]}>LKR {price} {count} </Text>

            {count == 0 &&
                <Cbutton
                    title='Add +'
                    style={{ width: 52, height: 22 }}
                    onPress={onPressAdd}
                />
            }

            {count > 0 &&
            <View style={{backgroundColor:'white',flexDirection:'row'}}>
                <Cbutton
                    title='+'
                    style={{ width: 30, height: 20 }}
                    onPress={onPressAdd}
                />
                <View style={{marginLeft:3,marginRight:3}}>
                    <Text>{count}</Text>
                </View>
                <Cbutton
                    title='-'
                    style={{ width: 30, height: 20 }}
                    onPress={onPressRemove}
                />
            </View>
            }

        </View>
    </View>
</View>

здесь, когда я добавляю в корзину продукт целых компонентов, получаю, как предотвратить повторное рендеринг целых компонентов

Answer 1

Чтобы не допустить повторного рендеринга целых компонентов, вы можете использовать PureComponent в реакции.

class Greeting extends React.PureComponent {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

По умолчанию при рендеринге в одном компоненте также отображаются все его подкомпоненты. Даже если их реквизиты не изменились, но React.PureComponent реализует shouldComponentUpdate () с мелкой подпоркой и сравнением состояний.

Проверка официальной документации