javascript - 当我们使用样式化组件时显示随机类？

Question

我在 React 中使用样式化的组件。每当我在样式化组件中编写样式并且如果在浏览器中加载应用程序时，我都会在开发人员工具的元素选项卡中获得一些随机类名称。我只想知道幕后发生了什么？

const Button = styled.a`
 display: inline-block;
 border-radius: 3px;
 padding: 0.5rem 0;
 margin: 0.5rem 1rem;
 width: 11rem;
 background: transparent;
 color: white;
border: 2px solid white;
`

render(
 <div>
  <Button
  href="https://github.com/styled-components/styled-components"
  target="_blank"
  rel="noopener"
  primary
>
  GitHub
</Button>
<Button as={Link} href="/docs">
  Documentation
</Button>

)

如果我们检查并检查开发人员工具中的元素，我可以看到一些随机类显示如下；

<a
  href="https://github.com/styled-components/styled-components"
  target="_blank"
  rel="noopener"
  class = "sc-jDwBTQ "
>
  GitHub
</a>

Answer 1

目前 styled-components 使用 MurmurHash 算法创建唯一标识符，然后将哈希数转换为字母名称。

每个具有唯一 props 的组件实例都有自己的 CSS 类名，该类名是通过 MurmurHash 算法、componentId 和 evaluateStyles 字符串生成的:

const className = hash(componentId + evaluatedStyles);

然后这个类名作为 generateClassName 存储在组件状态中。