《深刻react技术栈》之样式处理

基本样式设置

像素单位处理

对于样式中的与大小相关的值，react进行了优化处理，咱们直接使用数字便可，不用写px单位。

let style = {
	width: 18
}
复制代码

classname库

在咱们不使用库以前，须要本身动态拼接classname的字符串。源文件也很是简单，其下载量也说明其使用频率比较高，参考源码：连接

render(){
	const {isPressed, isActive} = this.state;
	let btnClass = 'btn';
  if(isPressed){btnClass +='pressed' };
  if(isActive){btnClass +='active' };
 
} 

// 有了以后 
import classNames from 'classNames';
render(){
	const {isPressed, isActive} = this.state;
	let btnClass = {
  	'btn':true,
    'pressed':isPressed,
    'isActive':isActive
  }
} 

复制代码

基本api以下：

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
// 数组的支持
var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'
复制代码

css modules

能够采起的方案

css模块化的方案主要有两种，分别为行内样式以及结合js收集依赖进行管理的css modules。

而行内样式具备明显的几个痛点是不能解决的，好比伪元素、动画、媒体查询等，因此实际开发中，咱们只有一些简单的样式处理才会使用行内样式，总体的样式方案并不会使用行内样式。

结合js收集css依赖，能够很方便的进行管理，并且webpack内置的css-loader能够很好地将样式以及js拆分出来。

面临的主要问题

全局样式污染

咱们默认的样式选择器是基于全局的，会形成全局样式污染，为了覆盖样式，咱们就须要使用！important这样的语句来覆盖。固然咱们也可使用组件内样式，但这样会致使外部没法重写样式，损失了灵活性。

命令混乱

也是因为全局命名的规则，因为各个成员的命名规则不统一，致使样式名称混乱。

依赖管理不完全

大多数开发者对于依赖管理不够完全，只是关心全局样式是否可用，不可用则直接重写或者覆盖。

没法共享变量

不一样的样式文件中，没法共享一些变量。

代码压缩不完全

使用css-module

开启模块化

在webpack.config.js中设置css?modules&localIdentName=[name]_[local]-[hash-base64-5].加上以后，咱们在引入样式时就能够实现样式的重命名，也能够方便的引入和控制某部分样式。好比：

// button.css
.normal{}
.disabled{}
复制代码

import styles from './button.css';

render(){
	return <button className={styles.normal}/> } // 最终生成的css名称 ，button-normal-abc456 复制代码

经过这样的模块化，解决的问题：

• 样式名冲突或者样式名的全局污染
• 方便自定义样式名规则，能够简化样式名
• 只须要关心js，引入了js组件便引入了js以及样式
• 不须要学习额外的css规则

默认局部样式

在上面开启模块化以后，默认是局部样式，也就是加了：local的，若是你但愿定义的样式是全局样式，你须要手动的加：global

组合样式 compose（不建议）

你可使用compose来组合也就是复用样式。固然若是你使用的是其余样式预处理器，其自己具备很灵活的各类样式处理规则，能够忽略这点，另一半样式预处理器也没有这条语法，请不要使用。

// button.css
.base{}
.active{
	compose:base;
  
}
复制代码

样式命名规则基于BEM

结合react

• 若是你不想每次都加styles.,可使用react-css-modules,它使用高级组件的方式避免重复输入styles
• 使用模块化时，若是你想使用全局的这个样式，能够不用样式里加，直接在使用的时候加global-css便可，若是是局部样式，使用local-module.
• react使用className的方式与传统方式的区别是，直接操做样式仍是间接经过操做classname来操做样式。实际上，在资深的css开发者都会认为，为了样式更好的维护，咱们是建议直接操做样式的，而不建议在js里拼接维护较多的样式代码。

小结

本文主要想提醒给你们的几个点：

• 与大小有关系的样式属性不用加单位
• 更建议直接经过classname去实现操做样式，经过对象的方式去配置，而不是本身拼接或者使用原始的classlist去操做
• 若是你的项目存在较多的样式污染或者管理样式依赖的问题，那么建议你能够看下css module，也许能解决你的问题，使用也只是配置的问题，不须要额外的其余学习