Я занимаюсь профилированием производительности с помощью инструментов разработчика Chrome в приложении SPA React (15.6), которое использует ag-grid-react, и у меня возникли небольшие проблемы с согласованием вывода профилировщика с реальностью. Например, на снимке экрана ниже видно, что метод «componentWillReceiveProps» компонента подключенного ящика (Connect(Drawer), оранжевая полоса) занимает ~2 секунды, но под этим ничего нет. После просмотра кода я скептически отнесся к тому, что сам метод может занять так много времени, поэтому я добавил несколько операторов console.time вокруг всего кода внутри функции, и вот:
Компонент ящикаWillReceiveProps: 0,02001953125 мс
Вот как выглядит мой componentWillReceiveProps для справки:
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 синхронизации пользователя показывает только то, что помечено (я только узнаю об этом сегодня, поэтому мое понимание этого API ограничено, если не сказать больше...), так что это просто случай, когда React на самом деле не синхронизирует то, что происходит внутри componentWillReceiveProps? Если это полезно, я использую повторный выбор и Redux, но я предполагаю, что мои селекторы уже запущены до вызова componentWillReceiveProps, но, может быть, я ошибаюсь?
В любом случае, я думаю, что есть что-то фундаментальное, чего я не понимаю в пламенных диаграммах Chrome, но я прочитал кучу статей, и это просто не складывается для меня.
Обновление: добавлена реализация componentWillReceiveProps
Обновление 2. Добавление ссылки в профиль Chrome
Если кому-то интересно взглянуть на фактический профиль, вот ссылка, вы можете просмотреть его, открыв инструменты разработчика Chrome, перейдя на вкладку производительности, а затем нажав «загрузить профиль»:
https://www.dropbox.com/s/72e9kwyxr0myec3/delete_react_perf_user_timing?dl= 0
Обновление 3: объяснение componentWillReceiveProps
Итак, кажется, что componentWillReceiveProps (каким-то образом) в конечном итоге вызывает mapStateToProps, что объясняет, почему это выглядит так долго в профиле. Я предполагаю, что вызов componentWillReceiveProps заменяется методом redux connect или чем-то подобным, но я не проверял это См. принятый ответ. Во всяком случае, вы можете увидеть доказательства этого на следующем снимке экрана:
