Тонны компонентов обновляются без какого-либо соответствующего изменения в состоянии - PullRequest
Новая
       5

Тонны компонентов обновляются без какого-либо соответствующего изменения в состоянии

0 голосов
/ 21 января 2019

Я пытаюсь диагностировать некоторую периодически ужасную производительность в своем приложении React и вижу множество обновлений компонентов без каких-либо изменений в props или state.

У меня есть сокетное соединение, где всякий раз, когда другой пользователь печатает, он передает факт, что он печатает - тогда он сохраняется в моем редукторе под typingUserData.

Теперь почти каждый компонент выполняет рендеринг всякий раз, когда он обновляется, даже если они никогда не ссылаются на эту переменную, и при этом она не включена в mapStateToProps, как и ни один из их дочерних элементов.

Я могу использовать shouldComponentUpdate для предотвращения обновлений в одном компоненте, но в любом случае каждый из его дочерних элементов будет перерисовываться. Предполагается ли, что я должен использовать одинаковые shouldComponentUpdate для каждого компонента?

Насколько я понимаю, если я смогу предотвратить это выше в дереве, низшие компоненты не будут без необходимости рендериться, но они делают это независимо. Наверное, я спрашиваю:

а) есть ли способ выяснить, ПОЧЕМУ они выбирают перерисовку, и

б) есть ли способ сказать "не рендеринг, и никто из твоих детей не должен рендерить тоже" в shouldComponentUpdate?

EDIT: Чтобы добавить немного контекста, я получаю данные о наборе из моего сокетного соединения, например: 

window.Echo.join('account_'+accountId).listenForWhisper('typing', e => {
    dispatch({
        type: TYPING_SET,
        payload: e,
    })
}

Это слито с моим состоянием так: 

export default function (state = INITIAL_STATE, action) {
    switch (action.type) {
        case TYPING_SET:
            let typingUserData = cloneDeep(state.typingUserData)

            typingUserData[action.payload.userId] = {
                isTyping: action.payload.isTyping,
                chatId: action.payload.chatId
            }

            return {
                ...state,
                typingUserData
            }
    }
}

НЕКОТОРЫЕ компоненты слушают это из mapStateToProps вот так: 

function mapStateToProps(state) {
  return {
    typingUserData: state.account.typingUserData,
  }
}

... но 99% компонентов этого не делают. Для перерисованных целых деревьев ничто в дереве не ссылается на typingUserData вообще.

  • Я использую реаги-редукс 5.0.7.
  • Насколько я могу обнаружить, ничего не монтируется дважды.
  • Выбор «выделенных обновлений» в инструментах консоли Chrome React показывает, что в результате этого светится практически все. Удаление действия для «набора текста» заставляет все это исчезнуть.

Надеюсь, этого достаточно! Извините за большую старую стену текста.

...