Как обходить слишком часто обновления Redux в приложении React?

Question

Как обходить слишком часто обновления Redux в приложении React?

1

У меня есть браузерное приложение с архитектурой React-Redux. В приложении происходит много событий (например, тайм-ауты, входящие сообщения через веб-сокет, сообщения веб-работников, ответы XHR и т.д.). Каждое событие генерирует действие Redux, которое изменяет хранилище Redux, которое вызывает рендеринг React.

Проблема в том, что события происходят так часто, что React не имеет достаточно времени для визуализации пользовательского интерфейса (например, событие происходит каждые 5 мс (или чаще), а React требуется 10 мс для визуализации пользовательского интерфейса). Это приводит к тому, что вся страница перестает отвечать на запросы, потому что процесс рендеринга не останавливается (у него всегда есть что-то для рендеринга), и у браузера нет времени рисовать DOM или обрабатывать событие DOM.

Каковы подходы или готовые решения для решения этой проблемы, учитывая, что я не могу уменьшить ни частоту событий, ни время рендеринга React?

Finesse 22 апр. 2019, в 06:32

Источник

0

Я не уверен, будет ли каждое обновление данных менять значение? Если это не так, может быть, вы можете попробовать memoization ? reactjs.org/blog/2018/06/07/...
Ewe Tek Min 22 апр. 2019, в 04:10
0

@tekminewe Я использую React.PureComponent и имею в виду обновления, которые меняют значения. В любом случае, подход «уменьшить время рендеринга React» не всегда подходит.
Finesse 22 апр. 2019, в 04:12
1

Рассматривали ли вы использование концепции функции debounce для решения этой проблемы? Передавать изменения в хранилище с избыточностью можно только в том случае, если прошло определенное время, иначе просто игнорируйте ответ от бэкэнда.
remelkabir 22 апр. 2019, в 04:12
0

@remelkabir Я думал об этом, но никогда не использовал его. Пожалуйста, оставьте ответ с описанием этой техники.
Finesse 22 апр. 2019, в 04:13
0

levelup.gitconnected.com/… это может дать вам представление о том, как его использовать.
remelkabir 22 апр. 2019, в 04:14
0

@remelkabir Я знаком с техникой debounce, мне интересно, как люди используют ее в приложениях React-Redux для решения описанной мной проблемы
Finesse 22 апр. 2019, в 04:15
0

Вы можете установить свойство updatedAt и проверить, прошло ли что-то updatedAt 3 секунд, каждый раз, когда поступают новые данные и появляется окно, обновляющее свойство в течение 3 секунд, в противном случае хранилище просто возвращает текущее состояние.
Asaf Aviv 22 апр. 2019, в 04:25
0

Мои извинения, я перепутал себя между дебатом и удушением. В вашем случае дросселирование решит проблему. Вы можете установить задержку времени, которое вы хотите, чтобы состояние было обновлено. Сделайте задержку на вашем действии, которое обновляет ваше состояние. Запускайте это действие только с последней полезной нагрузкой через определенный промежуток времени.
remelkabir 22 апр. 2019, в 04:28

Показать ещё 6 комментариев

Теги:

javascript

reactjs

performance

redux

2 ответа

Ещё вопросы

Я не уверен, будет ли каждое обновление данных менять значение? Если это не так, может быть, вы можете попробовать memoization ? reactjs.org/blog/2018/06/07/...
@tekminewe Я использую React.PureComponent и имею в виду обновления, которые меняют значения. В любом случае, подход «уменьшить время рендеринга React» не всегда подходит.
Рассматривали ли вы использование концепции функции debounce для решения этой проблемы? Передавать изменения в хранилище с избыточностью можно только в том случае, если прошло определенное время, иначе просто игнорируйте ответ от бэкэнда.
@remelkabir Я думал об этом, но никогда не использовал его. Пожалуйста, оставьте ответ с описанием этой техники.
levelup.gitconnected.com/… это может дать вам представление о том, как его использовать.
@remelkabir Я знаком с техникой debounce, мне интересно, как люди используют ее в приложениях React-Redux для решения описанной мной проблемы
Вы можете установить свойство updatedAt и проверить, прошло ли что-то updatedAt 3 секунд, каждый раз, когда поступают новые данные и появляется окно, обновляющее свойство в течение 3 секунд, в противном случае хранилище просто возвращает текущее состояние.
Мои извинения, я перепутал себя между дебатом и удушением. В вашем случае дросселирование решит проблему. Вы можете установить задержку времени, которое вы хотите, чтобы состояние было обновлено. Сделайте задержку на вашем действии, которое обновляет ваше состояние. Запускайте это действие только с последней полезной нагрузкой через определенный промежуток времени.

FuzzyTree · Answer 1 · 2019-04-22T03-06-00.000Z

Когда вы обновляете состояние из сообщения веб-сокета, запишите время и делайте еще одно обновление, только если с тех пор прошло определенное время.

В этом примере состояние обновляется, только если прошло 1000 мс с момента последнего обновления:

client.onUpdate(data => {        
    if (!this.lastUpdate || 
        new Date().getTime() - this.lastUpdate.getTime() > 1000) {
        this.setState({ data });
        this.lastUpdate = new Date();
    }
})

Видимо, состояние хранится в компоненте React (не в хранилище Redux) в вашем примере. Но у меня есть идея, спасибо.
@ Изящество да, это для реагирования, а не излишней, но идея та же самая. Я также только что понял, что lastUpdate не должно храниться в состоянии, так как представление не зависит от него и оно асинхронно

LiranC · Answer 2 · 2019-04-22T05-46-00.000Z

Вы можете просто отменить ваш обработчик.

Функция debounce означает, что она может быть вызвана только один раз за X период времени.

Для примера я не буду реализовывать детали отмены функции, а использую lodash.

// function that handles the server update.
const serverUpdateHandler = (dispatch) => {
  dispatch({
    type: SERVER_UPDATE
  })
}
// create a new function that is debounced. aka - will invoke after 250 milliseconds after the lace invokation
const debouncedHandler = _.debounce(serverUpdateHandler,250);
// pass socket.io the debounced function
socket.on('server-update',debouncedHandler)