时间戳

首页 > 解决方案 > 如何停止在 setState 上渲染图像

react-native - 如何停止在 setState 上渲染图像

问题描述

我有与计数器相关联的图像，并且基于计数器的增量或减量，计算完成并显示在底部的文本中。

问题是当我渲染时，图像会再次渲染并一次又一次地加载。我不想要。

如果我不渲染，文本将不会随着计算的数量更新。对于计数器，我使用的是 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 & 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>
        );
    }
}

标签： react-native

解决方案

您可以创建一个TextBox组件并将其从ImageComponent. 这样，图像就不会绑定到组件渲染文本的状态，您可以安全地更改TextBox状态和防止ImageComponent重新渲染的文本。

编辑：

Okei，现在我明白了。我认为你不可能这样做。

让我们将问题形式化：

<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
}

<Images/>每当您运行functionToCalcupdate <Parent>state 和 rerender时出现条件（buttonClick？）<CalcText>。这里的问题是也<Images>将再次重新渲染，因为所有父组件都将重新渲染。

这是在 React 中从兄弟姐妹传递信息的一种方式。

<Images>只有当你想阻止重新渲染时，你才有可能。

  1. 用于集中状态的Redux或类似库

您将在 a 中移动计算的计算Store并<CalcText/>从那里读取它。<Images/>组件将触发修改该状态的操作，但不会监听该状态，因此不会重新渲染。

推荐阅读