Styled-компоненты / эмоциональное исполнение динамических стилей по сравнению со статическими стилями? - PullRequest
Новая
       25

Styled-компоненты / эмоциональное исполнение динамических стилей по сравнению со статическими стилями?

0 голосов
/ 30 октября 2019

Мне интересно, есть ли разница в производительности между двумя нижеприведенными блоками кода: все стили внутри dynamicStyles и только стили, которые меняются внутри dynamicStyles.

Есть ли разница в производительности? Я понимаю, что это, вероятно, будет незначительным для большинства случаев использования, но я бы с упущением предположил, что это так.

Все стили в переменной dynamicStyles: 

const dynamicStyles = ({ theme }) => {
  const { myColors } = theme;
  return css`
    color: ${myColors.colorA};
    line-height: 1.5;
    margin-top: 1px;
    margin-bottom: 1px;
    flex-grow: 1;
    flex-shrink: 1;
    white-space: nowrap;
  `;
};

const StyledComponent = styled.span`
  ${dynamicStyles}
`;

Только динамические стили внутри dynamicStyles переменная: 

const dynamicStyles = ({ theme }) => {
  const { myColors } = theme;
  // Only dynamically changed styles inside the dynamicStyles variable
  return css`
    color: ${myColors.colorA};
  `;
};

const StyledComponent = styled.span`
    line-height: 1.5;
    margin-top: 1px;
    margin-bottom: 1px;
    flex-grow: 1;
    flex-shrink: 1;
    white-space: nowrap;
`;
...