React躬行记（8）——样式

　　因为React推崇组件模式，所以会要求HTML、CSS和JavaScript混合在一块儿，虽然这与过去的关注点分离正好相反，可是更有利于组件之间的隔离。React已将HTML用JSX封装，而对CSS只进行了较弱的封装，仅仅给出了基本的样式设置。不过，好在第三方库提供了CSS in JS的解决方案，让开发者能更高效的书写组件的样式，促进CSS工程化的发展。

1、内联样式

　　在React中的元素都包含style属性，用来定义内联样式。style的属性值是一个对象而不是一段字符串，该对象的属性就是CSS属性，但属性名要用小驼峰的方式命名，例如line-height改为lineHeight，具体以下所示。

class Btn extends React.Component {
  render() {
    let btnStyle = {
      height: 40,
      lineHeight: 1.5,
      WebkitBorderRadius: "10%"
    };
    return <button style={btnStyle}>提交</button>;
  }
}

　　在CSS中，有些属性是须要单位的，例如代码中的height，若是没有写明，那么React会自动给它们的数值加上像素（px）单位。还有一点要注意，属性名不会自动补全浏览器前缀，除了IE的ms前缀是纯小写以外，其它前缀的首字母都得是大写，例如Moz、O和Webkit。

2、CSS类

　　元素的className属性可以设置CSS类，它的值是一段字符串，以下代码所示，为<button>元素添加了一个名为btn的CSS类。

class Btn extends React.Component {
  render() {
    return <button className="btn">提交</button>;
  }
}

　　若是要动态处理（增、删或改）元素的CSS类，那么借助第三方的classnames库就能大大下降开发复杂度。下面有两个示例，完成了相同的功能，都会根据组件的active状态（布尔值）决定是否添加一个名为active的CSS类。

class Btn1 extends React.Component {
  render() {
    let className = "btn";
    if (this.state.active) className += " active";
    return <button className={className}>提交</button>;
  }
}
class Btn2 extends React.Component {
  render() {
    let btnClass = classNames({
      btn: true,
      active: this.state.active
    });
    return <button className={btnClass}>提交</button>;
  }
}

　　Btn1组件经过条件语句和字符串拼接实现了CSS类的添加，而Btn2组件的实现方式更为优雅和清晰，只须要调用classNames()函数就行。该函数能接收一个由CSS类组成的对象，其中属性名就是类名，属性值是布尔类型的，当为true时，就添加该属性，不然忽略。

3、CSS in JS

　　因为前端的职能和项目规模正在扩大，所以工程化是大势所趋，而CSS的先天缺陷却在阻碍这一发展进程，目前碰到的主要问题以下所列。

（1）全局做用域，任意一个CSS规则都对整个页面有效，当多个CSS规则发生冲突（即样式污染）时，会根据计算出的特殊性再决定采用哪一个CSS规则。虽然能够经过OOCSS、BEM等规范避免多人协做时的代码冲突，但毕竟是自选方案，须要依靠团队的执行力度，没法在语言或工具级别强制实施。

（2）缺乏编程特性，没有变量、循环或函数等编程语言所需的语法，使得样式表有不少冗余代码。虽然社区发展的CSS预处理器（Sass、Less等）和CSS后处理器（PostCSS）有效缓解了这种情况，可是没法共享CSS处理器和JavaScript中的变量，不能知足某些特定复杂的场景。

（3）没有依赖管理，在引入一个组件时，应该只加载与之关联的CSS，而不是像如今这样将整个CSS文件中的样式都导入进来。目前，市面上已经出现了好多用JavaScript管理CSS依赖的第三方库，例如styled-components、css-loader等。 

1）React的应对

　　在将CSS应用到React中时，为了能有效的规避上述问题，引入了CSS in JS的编程思想，即用JavaScript编写CSS，相关的解决方案有40多种之多，可谓百家争鸣，这其中又分为抛弃CSS和沿用CSS两种。

　　第一节所讲解的style属性（内联样式）就完全抛弃了CSS，彻底用JavaScript控制CSS，不只CSS属性的命名方式不一样，并且还没法使用伪类、伪元素、媒体查询等CSS特性。

　　而CSS Modules与前者不一样，依然采用JavaScript和CSS分离的写法，不只沿用现有的CSS生态和JavaScript模块化的能力，还支持CSS预处理器的语法，而且可以零成本对接遗留项目。经过将选择器编译成惟一的CSS类名后，就能实现CSS模块化。不过，因为采用了BEM（Block Element Modifier）命名规范，所以获得的CSS类名将会比较复杂，而且没有充分利用JavaScript来控制样式，例如没有打通JavaScript和CSS中的变量。

　　其实这两种解决方案只有在适合的场景中，才能最大限度的发挥它的做用，真正意义上的银弹并不存在，本节接下来要介绍一个介于这二者之间的第三方库：styled-components。

2）标签模板

　　styled-components的实现基于ES6新增的标签模板，移除了元素和样式之间的映射，经过JavaScript彻底控制了CSS，不只支持全部的CSS特性（例如伪类、媒体查询、动画等），还能自动添加浏览器前缀，但不支持Less、Sass等CSS预处理器的语法。下面的示例建立了一个带样式的Content组件，之因此定义在render()方法以外，是为了不缓存失效，提高渲染速度。

const Content = styled.button`
  color: red;
  appearance: none;
`;
class Btn extends React.Component {
  render() {
    return <Content>提交</Content>;
  }
}

　　在将Btn组件挂载到DOM中后，会渲染出一个包含CSS类的<button>元素，下面是生成的HTML代码。

<style>
  .iCQFTl {
    color: red;
    -webkit-appearance: none;
  }
</style>
<button class="iCQFTl">提交</button>

　　由styled-components为该按钮生成了一个名称惟一的CSS类iCQFTl，而且被内嵌到了页面中。注意，appearance是一个实验中的CSS属性，用于设置元素的默认样式，在不一样浏览器中会被styled-components添加不一样的前缀，例如上面CSS规则中的-webkit。

3）样式继承

　　经过构造函数styled()可以继承指定组件的样式，例如能够用下面的方式继承上例的Content组件，并额外声明背景颜色。

const BgContent = styled(Content)`
  background: yellow;
`;

4）属性传递

　　经过组件的props可以调整其自身的样式，以下代码所示，占位符内是一个箭头函数，其参数就是传递进来的props。

const AttrContent = styled.button`
  background: ${props => props.active ? "blue" : "white"}
`;
class Btn extends React.Component {
  render() {
    return <AttrContent active>提交</AttrContent>;
  }
}

5）选择器嵌套

　　styled-components使用了一个轻量级的CSS预处理器：stylis，用JavaScript实现了选择器的嵌套，以下代码所示，其中&符号表示父级选择器。

const ProContent = styled.button`
  &:hover {
    color: yellow;
  }
`;

　　限于篇幅缘由，本节只列出了styled-components的几个基础功能，其余诸如主题、附加属性、Refs、动画等功能能够参考官方文档。

　　styled-components开辟了一种新的控制CSS的方式，不但保持了原生CSS的写法，并且还忽略了CSS和HTML元素之间的关联，让React组件更简单。