您的位置:首页 > Web前端 > React

React躬行记(8)——样式

2019-07-17 05:19 2166 查看

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

一、内联样式

  在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。

二、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时,就添加该属性,否则忽略。

三、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组件更简单。

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: