Иван Акулов про разработку

2021-07-12 16:25:41 Открыть/Комментировать

2021-07-12 16:25:36 В чём проблема
Короче говоря, проблема со styled-components не в том, что они тормозят сами по себе, а в том, что они медленные в неожиданные моменты времени. То есть приложение не станет медленным, если добавить в него styled-component: Открыть/Комментировать

2021-07-12 16:25:07 Почему так происходит? Потому что, когда вы монтируете BootstrapPopoverOverrides, styled-components добавляет в документ новый блок стилей:


// →

Потом, когда вы удаляете BootstrapPopoverOverrides из документа, styled-components удаляет это блок. И так каждый раз, когда поповер открывается или закрывается.

А перевычисление стилей и лэйаута — это дорого. Если элементов на странице много, это может занять и полсекунды.

***

1.1K viewsedited  13:25

Открыть/Комментировать

2021-07-12 16:24:51 createGlobalStyle
styled-components позволяют писать глобальные стили. Например, если вам нужно застайлить popover из Bootstrap, это делается вот так:

const BootstrapPopoverOverrides = createGlobalStyle`
.popover {
background: #efefef;
z-index: 999;
}
`

const Popover = ({ menuItems }) => {
return <>

…

}

Если сделать такой поповер, поместить его на страницу с кучей элементов и попробовать пооткрывать его, страница будет зависать. Причём, в отличие от прошлого примера, зависать страница будет и тогда, когда поповер закрывается.

1.1K views13:24

Открыть/Комментировать

2021-07-12 16:24:37 Проблема вот в чём. Если вы смонтируете MenuWrapper с другими пропами, styled-components сгенерирует для него другой класс:


// → .ir7ERf { position: absolute; top: 200px; left: 500px; z-index: 10; }

На страничке 500 меню. Каждое меню обёрнуто MenuWrapper-ом со своими пропами. Каждый раз, когда вы открываете новое меню, вы монтируете новый уникальный MenuWrapper. Это заставляет styled-components сгенерировать для него новый класс.

А это дорого. Когда на странице меняется CSS, браузер вынужден перевычислить стили и лэйаут для всех элементов страницы. Если элементов много, это может занять и полсекунды.

***

1.1K views13:24

Открыть/Комментировать

2021-07-12 16:24:15 Почему так происходит? Когда вы монтируете MenuWrapper в первый раз, styled-components генерирует для него новый класс со всеми стилями:


// → .dBJeRo { position: absolute; top: 100px; left: 500px; z-index: 10; }

и присваивает этот класс DOM-элементу MenuWrapper-а:

// →

...

Потом, когда вы закроете меню, и MenuWrapper отмонтируется, этот класс останется в документе. Когда вы откроете меню во второй раз, styled-components применит его снова.

1.1K views13:24

Открыть/Комментировать

2021-07-12 16:24:00 Каждое меню обёрнуто в компонент, который его позиционирует:

const MenuWrapper = styled.div`
position: absolute;
top: ${props => props.offsetTop || DEFAULT_OFFSET_TOP}px;
left: ${props => props.offsetLeft || DEFAULT_OFFSET_LEFT}px;
z-index: 10;
`

Если на странице достаточно элементов, вы заметите, что когда вы открываете меню, страница зависает на полсекунды. Причём зависает не каждый раз, а только когда меню открывается в первый раз. Открыть/Комментировать

2021-07-12 16:23:46 Открыть/Комментировать

2021-07-12 16:23:34 И у каждой строки есть кнопка меню: Открыть/Комментировать

2021-07-12 16:23:26 Открыть/Комментировать