styled-components使用心得：避免过度组件化

本文转载自我的个人博客。

前几天看见一位老哥在网上发了帖子抱怨说styled-component不好用，并列出了四条原因。但是我发现他所谓的不好用其实是对styled-component的使用方法了解得不够全面，从而犯的一个错误：过度组件化。

何为过度组件化？我们先看一下这位老哥的代码：

  render() {
    return (
        <HeaderWrap>
            <HeaderContainer>
                <LogoArea>
                    <h1>Mask的弹幕网站</h1>
                    <p style={{fontSize:30+"px",marginTop:10+"px"}}><LogoArrow></LogoArrow>记录生活，不忘初心</p>
                </LogoArea>
                <LoginPanel>
                    <p onclick={this.showLoginBox}>登录</p>
                    <p onclick={this.showRegisterBox}>注册</p>
                </LoginPanel>
                <UserPanel>
                    <UserFigure>
                        <p><UserIcon src={this.props.userIconUrl} alt="user-figure"/></p>
                        <p>{this.props.userName}</p>
                    </UserFigure>
                    <UserMenu>
                        <UserOption>投稿</UserOption>
                        <UserOption>空间</UserOption>
                        <UserOption>注销</UserOption>
                    </UserMenu>
                </UserPanel>
            </HeaderContainer>
        </HeaderWrap>
    );
  }

在上面这段代码中，几乎每一个HTML标签都被这位老哥写成一个组件。

然后看看他觉得styled-component不好用的四条原因：

1. 有些组件所对应的样式可能就一两条，也要调用构造函数创建对象，这样很浪费资源，工作量也上升了。
2. styled-components 写完之后你不知道 html 元素是啥，即语义化很差。
3. 在 js 里写 css 没有自动补全，写得累。
4. styled-components 生成的 html 可读性很差 (因为由 styled-component 定义的组件在生成 html 文档时会随机绑定一个 class 名称，而这个随机生成的名称不具有可读性)。

我先回答第三条，在js里写css是有自动补全的哈，很多编辑软件都有styled-component相关的插件，可以帮助你在js的环境里补全css语句。比如在VSCode中这个插件叫vscode-styled-components。

然后再来回答一、二、四条。其实这三个抱怨都源于同一个原因，那就是styled-component的过度组件化。
我相信这位老哥使用styled-component的原因是想通过它对样式进行组件化，避免像传统css那样的全局污染。但是像上面那段代码，我们需要复用的组件是<Hearder>，那么我们只需要将<Hearder>组件里最外围的一个html标签用styled-component定义为一个样式组件可以了。以上面那段代码为例，我们只需要生成<HeaderWrap>这一个样式组件足矣，至于这个样式组件里面的其余标签，我们就直接用原生的html标签就好了。<HeaderWrap>组件里面的html标签的样式，我们就可以直接通过标签名和class来控制，就像正常写css那样，只不过在styled-component中语法稍稍有点区别。

这里先举一个小例子：

  const Wrapper = styled.div`
    /* 将Wrapper组件里的color设置为白色 */
    padding-left: 50px;  
    background: black;
    color: white;

    /* 将Wrapper组件里的h3标签的color设置为红色 */
    h3 {
    color: red
    }
    /* 将Wrapper组件里的className为black的标签的color设置为黄色 */
    .yellow {
    color: yellow
    }
  `

  render(
    <Wrapper>
      <p>白色 p 标签 </p>
      <h3>红色 h3 标签</h3> 
      <p className="yellow" >黄色 p 标签</p>
    </Wrapper>
  )

渲染结果如下：

styled-components-1-1.jpg

关于styled-component更详细的用法请移步我的另一片文章。