阻止特定组件的渲染

Question

如何防止render方法仅渲染头像（id =“ av”）？

基本上，这个想法是通过onClick更新CardMedia中的图像。由于将再次渲染组件，因此头像颜色将更改。

 const { classes } = this.props;
    this.state.images = this.state.appData.map(element => element.imageUrl);
    const classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.redAvatar];

 <Card >
            <CardHeader
                avatar={
                    <Avatar id="av" aria-label="Recipe"
                        className={classNameHolder[Math.floor(Math.random() * classNameHolder.length)]}>
                        {this.props.userName.charAt(0).toLocaleUpperCase()}
                    </Avatar>
                }
                title={this.props.userName} disableTypography={true} />
            <CardActionArea disabled={this.state.images.length === 1 ? true : false}>
                <CardPrimaryContent>
                    <CardMedia
                        square id={this.props.ownerId}
                        imageUrl={this.state.images[this.state.imageIndex]}
                        onClick={this.handleOnClick} />
                </CardPrimaryContent>
            </CardActionArea>
        </Card >

谢谢