Реагирование на стилизованные компоненты - PullRequest
1 голос
/ 18 марта 2020

Я работаю над сайтом, используя React и Styled Components. Однако веб-сайт очень медленно работает на мобильных устройствах, и в консоли Google Chrome появляются предупреждения:

[Нарушение] Длительное выполнение JavaScript Задача заняла 305 мс

Итак, я нашел существующие топи c с этой проблемой и поиском того, что замедляет мое приложение с помощью React Developer Tools. Я создал новую пустую страницу со многими отображаемыми элементами:

import * as React from 'react'
import { render } from 'react-dom'

const items = new Array(5000).fill({ title: 'Title', description: 'This is description.' })

render(
    <>
        {items.map((item, i) => (
            <div>
                <h1>{item.title}</h1>
                <p>{item.description}</p>
            </div>
        ))}
    </>,
    document.getElementById('app')
)

Профилировщик React Dev Tools показывает:

enter image description here

Однако, если я замените React div, h1 и p на стилизованные компоненты Styled.div, Styled.h1 и Styled.p (без каких-либо стилей):

import * as React from 'react'
import { render } from 'react-dom'
import Styled from 'styled-components'

const items = new Array(5000).fill({ title: 'Title', description: 'This is description.' })

const Item = Styled.div``
const Title = Styled.h1``
const Description = Styled.p``

render(
    <>
        {items.map((item, i) => (
            <Item>
                <Title>{item.title}</Title>
                <Description>{item.description}</Description>
            </Item>
        ))}
    </>,
    document.getElementById('app')
)

Время визуализации будет более четырех раз длиннее:

enter image description here

Вот временная шкала (выше - временная шкала, ниже - деталь одного элемента):

enter image description here

Большую часть времени занимает некоторый потребитель контекста:

enter image description here

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...