Реагируйте на производительность в Chrome - PullRequest
Новая
       16

Реагируйте на производительность в Chrome

0 голосов
/ 03 июля 2018

Я занимаюсь профилированием производительности, используя инструменты разработчика Chrome для приложения SPA React (15.6), в котором используется ag-grid-реагировать, и у меня возникли некоторые проблемы с согласованием вывода профилировщика с реальностью. Например, на приведенном ниже снимке экрана он выглядит так, как будто метод «componentWillReceiveProps» подключенного компонента ящика (Connect (Drawer), оранжевая полоса) занимает ~ 2 с, но под этим ничего нет. Я скептически посмотрел на код, который, возможно, сам метод может занять так долго, поэтому я добавил несколько операторов 'console.time' вокруг всего кода внутри функции и low, и вот:

Компонент ящикаWillReceiveProps: 0,02001953125мс

Вот как выглядит мой компонентWillReceiveProps для справки: 

componentWillReceiveProps(nextProps) {
        console.time('Drawer componentWillReceiveProps');
        if (nextProps.changes.length !== this.props.changes.length &&
            nextProps.changes.length === 0 &&
            this.state.isDiscarding) {
            this.setState({isDiscarding: false});
        }
        console.timeEnd('Drawer componentWillReceiveProps');
    }

Так чего мне здесь не хватает? Я (своего рода сортировка) понимаю, что пользовательский интерфейс синхронизации времени показывает только те вещи, которые отмечены (я только сегодня узнаю об этом, поэтому мое понимание этого API ограничено, мягко говоря ...), так что это просто в случае, если React на самом деле не синхронизирует то, что происходит внутри componentWillReceiveProps? Если это полезно, я использую re-select и Redux, но я предполагаю, что мои селекторы уже запускались до вызова componentWillReceiveProps, но, возможно, я ошибаюсь по этому поводу?

В любом случае, я думаю, что есть кое-что фундаментальное, чего я не понимаю в диаграммах пламени Chrome, но я прочитал кучу статей, и это просто не складывается для меня.

Обновление: добавлена ​​реализация компонента WillReceiveProps

react chrome profile

Обновление 2: добавление ссылки в профиль Chrome

Если кто-то заинтересован взглянуть на реальный профиль, перейдите по ссылке, вы можете просмотреть ее, открыв инструменты разработчика Chrome, перейдя на вкладку «Производительность» и нажав «Загрузить профиль»:

https://www.dropbox.com/s/72e9kwyxr0myec3/delete_react_perf_user_timing?dl=0

Обновление 3: объяснение componentWillReceiveProps

ОК, так что кажется, что componentWillReceiveProps (каким-то образом) в конечном итоге вызывает mapStateToProps, что объясняет, почему в профиле это выглядит так долго. Я предполагаю, что вызов componentWillReceiveProps будет заменен методом connect-редукса или чем-то в этом роде, но я не проверял, что См. Принятый ответ. В любом случае, вы можете увидеть доказательства этого на следующем скриншоте:

componentWillReceiveProps call stack

1 Ответ

0 голосов
/ 12 июля 2018

Если вы присмотритесь к диаграмме пламени, это вызов Connect(Drawer).componentWillReceiveProps, который занимает много времени, , а не сам компонент Drawer , что объясняет, почему мой код синхронизации внутри компонента Drawer полностью отображал синхронизацию иначе, чем график пламени. Компонент Connect(Drawer) - это компонент высшего порядка, цель которого - вызвать mapStateToProps и mapDispatchToProps для сопоставления создателей состояний и действий с реквизитами вашего компонента. В этом случае мой mapStateToProps звонок был очень медленным, что объясняет результаты на графике.

В качестве дополнительного примечания было бы замечательно, если бы Resact-redux добавил API синхронизации пользователя, чтобы вызовы mapStateToProps и т. Д. Отображались на графике пламени.

TL; DR Обратите особое внимание на фактические названия компонентов на графике пламени.

...