我为何使用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届毕业生，而且前端功底不错的话，能够扫码内推哦