我爲何使用styled-components

看了很多styled-components的文章，但沒怎麼找到與我產生共鳴的，因此就本身寫一篇了

在寫業務代碼的過程當中常常遇到前端命名規則和後端接口返回不一致的狀況，咱們須要在代碼中作不少煩人的轉換，例如

fetch().thne(resp => {
  this.userName = resp.user_nick_name;
})
複製代碼

咱們須要這種把user_nick_name轉換爲userName的適配代碼，以便把後端的數據放到前端的各類組件和Store中，這種操做是一種映射，通this.userName = resp.user_nick_name;這句綁定先後端數據的映射關係。

思惟稍微發散一下，你會發現，CSS和DOM之間不也是經過這種映射關係綁定才讓樣式生效的嘛！

<div class="red-button"></div>
複製代碼

上面這段代碼的寫法，DOM和CSS是徹底分離的，咱們經過class="red-button"這種方式將CSS樣式中的key與DOM綁定到一塊兒，讓樣式生效。 這樣寫有好處，樣式和DOM分離，單獨來看都比較便於維護。

但問題就出在class="red-button"這句綁定上，當我找.red-button具體的樣式時，若是項目目錄結構比較規範，還算方便的就能找到CSS的文件，而後在文件中搜.red-button，定位紅色按鈕的樣式代碼，還算OK。但若是項目目錄結構不規範，.red-button可能被定義在整個工程的anywhere。這時候就麻煩了，我通常都會直接全局搜索，並非那麼的舒服。

這時候必定會有人說css-modules，它可讓你像引入js那樣引入css爲json對象。這樣的話，css文件就好找了。

import styles from './style.css';
複製代碼

但你有沒有想過，那咱們爲何須要寫div, 爲何要有綁定映射用的class=。

有沒有仔細思考過紅色按鈕最直接的表達方式是什麼？答案很簡單，就是一個紅色按鈕而已啊。

<RedButton />
複製代碼

我感受在JSX或者在DOM上面不段的寫className="button", calss="button", class={styles.button}，這些重複的class=，這樣顯得挺笨拙的，不是麼？

再看下面這段代碼:

.red-button {
  color: red;
}
<div class="red-button"></div>
複製代碼

咱們該把關注點放在DOM元素究竟是一個div標籤仍是button標籤嗎？顯然不是，這都是多餘的東西。

用styled-components寫，煩人的綁定過程消失，再也見不到class=這種綁定樣式的語法了。

const RedButton = styled.div` color: red; `;
<RedButton /> 複製代碼

如上，這就是我使用styled-components的緣由。

淘寶前端 2020年校招正在進行中~~~若是你是20屆畢業生，而且前端功底不錯的話，能夠掃碼內推哦