我可以在渲染函数中使用样式化组件css``方法吗？

Question

我知道由于性能问题，不建议在render函数（或无状态函数组件）中定义样式化的组件。但是，我想知道在渲染函数中使用css方法是否还会对性能产生负面影响？

function Component = ({children, ...props) => (
    <div css={`margin-bottom: 1rem`}>{children}</div>
);

谢谢！

Answer 1

经过一些测试，看来css prop类似于创建一个已记忆的3.7.0组件。组件重新渲染不会重新创建类名，并且状态/属性操作与标准样式的组件完全相同-更改CSS属性后，它会生成新类或根据CSS的使用方式重用旧的类改变了。也就是说，此方法的主要缺点是需要将styled.element或babel-plugin-styled-components加上babel-plugins-macro添加到您的依赖项中（如果使用styled-components/macro，必须导入到EACH文件中），这可能会或可能会影响应用程序的编译时间并使您的应用程序更大。

因此，如果您对以上内容都满意，那么您应该不会注意到太多/任何应用程序性能差异。但是，真的值得额外的依赖项/依赖项以及额外的babel配置来避免这样做：

styled-components/macro

可以达到与上述相同的结果，但是依赖性更少/配置更少/工作量更少。我不知道，这取决于你...