Блог

У меня есть изображения, связанные со счетчиком, и на основе этого увеличения или уменьшения в counter выполняется вычисление и отображается в тексте внизу.

Проблема в том, что при рендеринге изображения снова отображаются и загружаются снова, снова и снова. чего я не хочу.

Если я не буду рендерить, текст не будет обновляться с вычисленной суммой. Для счетчика я использую react-native-counter.

Я уже пробовал использовать shouldcomponentupdate, но я хочу остановить только рендеринг изображений, остальное должно работать.

Пожалуйста, посоветуйте.

 export default class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <Header
                    backgroundColor="#25D366"
                    leftComponent={
                        <Icon
                            name="menu"
                            size={40}
                            color={"#fff000"}
                            onPress={() => this.props.navigation.openDrawer()}
                        />
                    }
                    centerComponent={{
                        text: "Veg amp; Fruits",
                        style: {
                            color: "#ffffff",
                            fontSize: 25,
                            fontWeight: "bold",
                        },
                    }}
                    rightComponent={<Icon name="home" color={"#ff0000"} />}
                ></Header>
                /// this is searchbar component,
                <SearchBar
                    fontColor="#ffffff"
                    fontWeight="bold"
                    fontSize={20}
                    iconColor="#c6c6c6"
                    shadowColor="#ffffff"
                    cancelIconColor="#c6c6c6"
                    backgroundColor="#25D366"
                    placeholder="Search here"
                    onChangeText={(text) => {
                        this.setState({ photos: [] });
                        this.state.search = text;
                        this.filterList(this.state.search);
                        console.log("text changed");
                    }}
                    onPressCancel={(text) => {
                        text = "";
                        //this.filterList(text);
                    }}
                    onPress={(text) => {
                        console.log("rendering");
                        console.log("now text is: ", this.state.search);
                    }}
                />
                /// in this view images are displayed using functions
                <View>
                    <ScrollView
                        style={{
                            height: Dimensions.get("window").height - 200,
                        }}
                    >
                        <View
                            key={Date.now()}
                            style={{
                                flex: 1,
                                flexDirection: "column",
                                flexWrap: "wrap",
                            }}
                        >
                            {this.filterList(this.state.search)}
                            {this._renderImages()}
                        </View>
                    </ScrollView>

                    <CalcText tt={total_num} />
                </View>
            </div>
        );
    }
}

class CalcText extends Component {
    constructor(props) {
        super(props);
        this.state = {
            ta: 0,
        };
    }

    shouldComponentUpdate(nextProps) {
        console.log(nextProps.tt);
        if (this.props.tt !== nextProps.tt) {
            console.log("changed");
            return true;
        } else {
            console.log("Not changed");
            return false;
        }
    }

    render() {
        return (
            <View style={{ height: 40, backgroundcolor: "ff0000" }}>
                <Text style={{ fontSize: 26, fontWeight: "bold" }}>
                    Total : {this.props.tt}
                </Text>
            </View>
        );
    }
}
  

Вы можете создать TextBox компонент и разделить его ImageComponent . Таким образом, изображения не будут привязаны к состоянию компонента, отображающего текст, и вы можете безопасно изменять TextBox состояние и текст, предотвращая ImageComponent повторный рендеринг.

Редактировать:

Окей, теперь я понял. Я думаю, у вас нет возможности сделать это так.

Давайте формализуем проблему:

 <Parent>
    <Images calc={functionToCalc} />
    <CalcText totalAmount={this.state.totalAmount}/>
</Parent>
  

functionToCalc определяется в in <Parent> и обновляет родительское состояние, что-то вроде:

 const funcToCalc = () => {
   // when condition occurs
   this.setState({
      totalAmount : computedAmount
   })
}
  

Состояние <Parent> имеет:

 this.state : {
    totalAmount: none
} 
  

Всякий раз, когда условие (ButtonClick?) происходит при <Images/> запуске functionToCalc обновления <Parent> состояния и повторном запуске <CalcText> . Проблема здесь в том, что также <Images> будет повторный запуск, поскольку весь родительский компонент будет повторным.

это один из способов передачи информации от братьев и сестер в React.

У вас есть такая возможность, только если вы хотите предотвратить <Images> повторный рендеринг.

1. Redux или аналогичные библиотеки для централизованного состояния

Вы переместите вычисленное вычисление в a Store и <CalcText/> прочитаете его оттуда. <Images/> компонент запускает действие, изменяющее это состояние, но не будет прослушивать его, поэтому не будет перезаписываться.