Question

哪个优化程度更高？为什么？

我听说Styled-component中的css方法非常昂贵，但是我想知道多重嵌套的${(prop) => {}}是否比使用css方法的单个fn更昂贵内部。

方法1

const Foo = styled.div`
  border-radius: 50%;
  display: flex;
  width: ${(props) => props.size};
  height: ${(props) => props.size};
  color: ${(props) => props.bgColor};
  background-color: ${(props) => props.bgColor};
`;

vs

方法2

const Bar = styled.div`
  border-radius: 50%;
  display: flex;
  ${(props) => {
    return css`
      width: ${props.size};
      height: ${props.size};
      color: ${props.bgColor};
      background-color: ${props.bgColor};
    `;
  }}
`;

Answer 1

性能差异应可忽略不计。样式化组件唯一可以进行的优化是样式是静态的（没有插值）。

请注意，styled.div或任何其他样式CSS方法已经完成了与css相同的工作。这些方法接受函数作为参数（而不是插值字符串）。因此，您可以将其更进一步并执行以下操作：

const Baz = styled.div((props) => css`
  border-radius: 50%;
  display: flex;
  width: ${props.size};
  height: ${props.size};
  color: ${props.bgColor};
  background-color: ${props.bgColor};
`);

React Styled Component的CSS方法优化

哪个优化程度更高？为什么？

1 个答案: