Question

我有一个组件。

功能：调用主机列表并显示其状态为up或down。

在componentDidmount（）中，我正在使用setInerval（）函数，当一个或只有两个状态发生变化时，它将导致整个组件重新呈现。

场景：列表中有12个主机，我在呼叫每个主机并更新其状态。
情况1：在第一个间隔10中，主机状态为打开，其余2个状态为关闭。下次通话主机状态再次为10，其余状态为2，但整个组件正在呈现。那不应该。
我尝试过的事情：

class _Grid extends Component {

    shouldComponentUpdate(nextProps){
        if(this.props.card === nextProps.card){
            return false;
        }
    }

    render() {
        const { card, classes } = this.props;
        const up = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQA/Z";
        const down = "data:image/png;base64,iVBORw0KGgoCC";

        return (
            <Grid item key={card.app} sm={6} md={4} lg={3}>
                <Card className={classes.card}>
                    <CardMedia
                        image={card.status == 'up' ? up : down}
                        className={classes.cardMedia}
                        title="Image title"
                    />
                    <CardContent className={classes.cardContent}>
                        <Typography gutterBottom variant="headline" component="h2">
                            {card.appName}
                        </Typography>
                    </CardContent>
                </Card>
            </Grid>);
    }
}

Answer 1

我可以看到您正在使用mainTemplate方法对===和props进行nextProps比较。在javascript中，使用严格相等性比较两个对象时，比较仅在两个变量都引用同一对象时才返回true。在您的示例中，我看不到更新props值的逻辑，但是我假设在setInterval中重新创建了props，这意味着每次都会创建一个新对象。有关按值深度比较对象的方法，请参考其他stackoverflow答案：

在reactjs

1 个答案: