Question

我想在redux状态更改后重新渲染某些特定的子组件，以便解决该问题

这是我的代码：

    <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

为了防止整个组件重新渲染，可以在react中使用PureComponent。

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

默认情况下，在单个组件中进行渲染会导致其所有子组件也都进行渲染。即使他们的道具没有改变，但是React.PureComponent还是通过浅层的道具和状态比较来实现shouldComponentUpdate（）。

Check official documentation

Answer 2

您可以使用shouldComponentUpdate处理道具或声明状态以重新渲染组件

仅在count或price更改时只想重新渲染屏幕的示例：

shouldComponentUpdate(nextProps, nextState){
   if (nextProps.price !== this.props.price ||
       nextProps.count !== this.props.count) 
       return true;
   return false
}

React Native重新渲染所有组件，包括子组件

2 个答案: