Проблема с производительностью - обновляйте только тот компонент, который отображает данные

Question

У меня проблема с производительностью, которую я не знаю, как решить. У меня есть такая структура компонентов (<PostDetail> является родительским компонентом):

Структура данных

Данные в состоянии post, которые передаются через PostContext (см. Ниже)

{
    "_id": "5eb1a5dd53ec08cdabca7ef3",
    [... more data]
    "description": "{blocks: Array(5), entityMap: {…}}",
    "likeCount": 6,
    "comments": "[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]"
    isLikedByUser: true
}

На следующем экране вы можете увидеть вкладку chrome производительности, когда я нажмите кнопку «Нравится» моего компонента, который обновит likeCount, который отображается только в компоненте <LikeCount>.

Производительность

Когда я нажимаю кнопку «Нравится», я отправляю стандартный запрос Ax ios post, а затем обновляю свое состояние post, которое передается через PostContext, используя:

import { PostContext } from "../../../context/PostContext"
const [post, setPost] = useContext(PostContext)
[...]
setPost({ ...post, isLikedByUser: isLiked, likeCount: likeCount })

Здесь ничего особенного, но, как вы можете видеть на предыдущем скриншоте, все обновление занимает около 300 мс (на смартфоне еще хуже ...), что очень плохо для пользовательского опыта.

Что я могу сделать, чтобы обновить только <LikeCount>, а не другие компоненты внутри <PostDetail> (например, <Description> или <Comments>)

Answer 1

Поскольку увеличивается количество комментариев, вызывающих проблемы с like сообщений

, я бы рекомендовал вам обернуть компонент Comments с помощью React.memo (эквивалент shouldComponentUpdate в класс компонент), который блокирует ненужный повторный рендеринг Comments, если для него нет обновлений.

Примечание: React.memo проверяет только изменения свойств. Если ваш функциональный компонент, обернутый в React.memo, имеет useState или useContext Hook в своей реализации, он будет по-прежнему повторно отображать при изменении состояния или контекста .

Фактически, вы можете обернуть все такие компоненты, которые не нуждаются в ненужном рендеринге.

Помните приведенный ниже оператор из docs

Даже если React обновляет только измененные узлы DOM, повторно рендеринг по-прежнему занимает некоторое время. Во многих случаях это не проблема, но если замедление заметно, вы можете ускорить все это, переопределив функцию жизненного цикла shouldComponentUpdate, которая запускается до начала процесса повторного рендеринга.