javascript - 在reactjs中使用setInterval函数的正确位置是什么

Question

我有一个组件。

• 功能:调用主机列表并显示其状态是开启还是关闭。

在 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

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