@midzurana

Как не изменять дочерний комппонент при изменении state у родителя?

handleDrawerOpen () {
        this.setState({
            isDrawerOpen: true
        });
    }
Я отправляю запрос на сервер, и Drawer прежде чем открыться, перерисовывает весь компонент, из-за чего загрузка идет очень долго. Как изменить isDrawerOpen, чтобы он не перерисовывал весь компонент?

Весь код
class GroupsPageComponent extends React.Component {
    constructor () {
        super();

        this.state = {
            isDrawerOpen: false
        };
    }

    handleDrawerClose () {
        this.setState({
            isDrawerOpen: false
        });
    }

    onGroupSelect (id) {
        this.setState({
            isDrawerOpen: true
        });
    }

    render () {
        return (
            <div className="container">
                <Grid container item xs={12} spacing={2}>
                    <Grid container item xs={7}>
                        <SimpleCard>
                            <GroupsTree
                                onGroupSelect={this.onGroupSelect}
                                showMessage={this.props.showMessage}
                                showDialog={this.props.showDialog}
                            />
                        </SimpleCard>
                    </Grid>
                    <Grid container item xs={6}>
                        <Drawer
                            anchor="right"
                            variant="persistent"
                            open={this.state.isDrawerOpen}
                        >
                            <div className="drawer-wrapper">
                                <List>
                                    <Grid>
                                        <IconButton
                                            onClick={this.handleDrawerClose}
                                        >
                                            <ArrowForwardIosIcon />
                                        </IconButton>
                                    </Grid>
                                    <Grid>
                                        <StatusPieDiagram
                                            collection={this.props.statusCollection}
                                        />
                                    </Grid>
                                    <Grid>
                                        <GroupDetais
                                            model={this.props.model}
                                        />
                                    </Grid>
                                </List>
                            </div>
                        </Drawer>
                    </Grid>
                </Grid>

            </div>
        );
    }
}

GroupsPageComponent.defaultProps = {
    model: new GroupModel(),
    statusCollection: new StatusCollection()
};

export default GroupsPageComponent;


Надо, чтобы не обновлялся GroupTree
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
thehighhomie
@thehighhomie
Унаследуй GroupTree от PureComponent и в нем проверяй через shouldComponentUpdate, если не изменились пропсы то не нужно его ререндерить
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы