Как устранить мигание блоков на странице при их обновлении после загрузки данных с сервера?

Question

Caleb

react

Как устранить мигание блоков на странице при их обновлении после загрузки данных с сервера?

Как можно улучшить процесс смены таблиц в компоненте, чтобы при обновлении не возникало мерцания и таблица отображалась моментально? Кажется, `useLayoutEffect` может помочь в данной ситуации, но не очень понятно, как его использовать в данной реализации. Возможно, хотите узнать, как использовать `useLayoutEffect` для устранения мерцания при смене таблиц с помощью приведенного кода?

27 марта 2024 г. 9:19

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для устранения мерцания при обновлении блоков на странице после загрузки данных с сервера можно воспользоваться методом оптимизации рендеринга компонентов. Одним из способов сделать это является использование `useLayoutEffect`.

`useLayoutEffect` является альтернативным вариантом `useEffect`, который срабатывает сразу после мутации DOM и до того, как браузер нарисует изменения на экране. Это может помочь в предотвращении мерцания при обновлении элементов страницы.

Пример использования `useLayoutEffect` для устранения мерцания при смене таблиц в компоненте может выглядеть примерно следующим образом:

```javascript
import React, { useState, useEffect, useLayoutEffect } from 'react';

const TableComponent = () => {
  const [tableData, setTableData] = useState([]);

  useEffect(() => {
    // Здесь происходит загрузка данных с сервера
    // и установка полученных данных в стейт tableData
  }, []);

  // Используем useLayoutEffect для моментального отображения таблицы
  useLayoutEffect(() => {
    // Осуществляем обновление таблицы после получения данных
  }, [tableData]);

  return (
    <div>
      {/* Здесь отображаем таблицу с данными из tableData */}
    </div>
  );
};

export default TableComponent;
```

В данном примере при смене данных в `tableData` с помощью `useLayoutEffect` происходит моментальное обновление таблицы на странице, что позволяет избежать мерцания при её изменении. 

Кроме использования `useLayoutEffect`, также стоит обратить внимание на оптимизацию рендеринга компонентов, например, с помощью мемоизации или разделения компонентов на более мелкие части. Все это в совокупности может помочь улучшить процесс смены таблиц и избежать мерцания на странице.

Answer 2

Моргает он потому, что в момент отрисовки старый уже удален, а новый еще не отрисован. Варианты решения: 
 - Убедиться точно, что новый контент загружен и лишь затем его выводить. Если контент будет слишком тяжелый для устройства клиента, то этот метод не сработает, т.к. устройству еще понадобится время для его рендера, т.е. моргание будет заметно. 
 - Добавить некий loading в место, где ожидается появление новых данных. 
 
 Как вариант, вместо пустого дива: 
 <section>
    <div ref={tables} className={style.tableWrapper}>
        {isLoading ? createTable(currentTable) : createTable(table)}
    </div>
</section>