本文轉(zhuǎn)載自我的個人博客墨吓。
前幾天看見一位老哥在網(wǎng)上發(fā)了帖子抱怨說styled-component不好用，并列出了四條原因埃跷。但是我發(fā)現(xiàn)他所謂的不好用其實是對styled-component的使用方法了解得不夠全面本讥，從而犯的一個錯誤：過度組件化。
何為過度組件化严沥？我們先看一下這位老哥的代碼：
render() {
return (
<HeaderWrap>
<HeaderContainer>
<LogoArea>
<h1>Mask的彈幕網(wǎng)站</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標(biāo)簽都被這位老哥寫成一個組件消玄。
然后看看他覺得styled-component不好用的四條原因：
- 有些組件所對應(yīng)的樣式可能就一兩條跟伏，也要調(diào)用構(gòu)造函數(shù)創(chuàng)建對象，這樣很浪費資源翩瓜，工作量也上升了受扳。
- styled-components 寫完之后你不知道 html 元素是啥，即語義化很差兔跌。
- 在 js 里寫 css 沒有自動補全勘高，寫得累。
- styled-components 生成的 html 可讀性很差 (因為由 styled-component 定義的組件在生成 html 文檔時會隨機綁定一個 class 名稱，而這個隨機生成的名稱不具有可讀性)华望。
我先回答第三條层亿，在js里寫css是有自動補全的哈，很多編輯軟件都有styled-component相關(guān)的插件立美，可以幫助你在js的環(huán)境里補全css語句匿又。比如在VSCode中這個插件叫vscode-styled-components。
然后再來回答一建蹄、二碌更、四條。其實這三個抱怨都源于同一個原因洞慎，那就是styled-component的過度組件化痛单。
我相信這位老哥使用styled-component的原因是想通過它對樣式進行組件化，避免像傳統(tǒng)css那樣的全局污染劲腿。但是像上面那段代碼旭绒，我們需要復(fù)用的組件是<Hearder>，那么我們只需要將<Hearder>組件里最外圍的一個html標(biāo)簽用styled-component定義為一個樣式組件可以了焦人。以上面那段代碼為例挥吵，我們只需要生成<HeaderWrap>這一個樣式組件足矣，至于這個樣式組件里面的其余標(biāo)簽花椭，我們就直接用原生的html標(biāo)簽就好了忽匈。<HeaderWrap>組件里面的html標(biāo)簽的樣式，我們就可以直接通過標(biāo)簽名和class來控制矿辽，就像正常寫css那樣丹允，只不過在styled-component中語法稍稍有點區(qū)別。
這里先舉一個小例子：
const Wrapper = styled.div`
/* 將Wrapper組件里的color設(shè)置為白色 */
padding-left: 50px;
background: black;
color: white;
/* 將Wrapper組件里的h3標(biāo)簽的color設(shè)置為紅色 */
h3 {
color: red
}
/* 將Wrapper組件里的className為black的標(biāo)簽的color設(shè)置為黃色 */
.yellow {
color: yellow
}
`
render(
<Wrapper>
<p>白色 p 標(biāo)簽 </p>
<h3>紅色 h3 標(biāo)簽</h3>
<p className="yellow" >黃色 p 標(biāo)簽</p>
</Wrapper>
)
渲染結(jié)果如下：
關(guān)于styled-component更詳細的用法請移步我的另一片文章袋倔。
