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更詳細的用法請移步我的另一片文章

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容