React中的样式和动画

CSS 概述(理解)

1.组件化天下的CSS

• 前面说过，整个前端已经是组件化的天下:
  • 而CSS的设计就不是为组件化而生的
  • 所以在目前组件化的框架中都在需要一种合适的CSS解决方案
• 在组件化中选择合适的CSS解决方案应该符合以下条件：
  • 可以编写局部css：css具备自己的局部作用域，不会随意污染其他组件内的元素
  • 可以编写动态的css：可以获取当前组件的一些状态，根据状态的变化生成不同的css样式
  • 支持所有的css特性：伪类、动画、媒体查询等
  • 编写起来简洁方便、最好符合一贯的css风格特点

2.浅谈React中的CSS

• 事实上，css一直是React的痛点，也是被很多开发者吐槽、诟病的一个点

• 在这一点上，Vue做的要确实要好于React：

  • Vue通过在.vue文件中编写 <style><style> 标签来编写自己的样式
  • 通过是否添加 scoped 属性来决定编写的样式是全局有效还是局部有效
  • 通过 lang 属性来设置你喜欢的less、sass等预处理器
  • 通过内联样式风格的方式来根据最新状态设置和改变css

• Vue在CSS上虽然不能称之为完美，但是已经足够简洁、自然、方便了，至少统一的样式风格不会出现多个开发人员、多个项目采用不一样的样式风格。

• 相比而言，React官方并没有给出在React中统一的样式风格

  • 由此，从普通的css，到css modules，再到css in js，有几十种不同的解决方案，上百个不同的库
  • 大家一致在寻找最好的或者说最适合自己的CSS方案，但是到目前为止也没有统一的方案

React中的样式

1.内联样式

• 内联样式是官方推荐的一种css样式的写法：

  • style接受一个采用小驼峰命名属性的 JavaScript 对象，，而不是 CSS 字符串；
  • 并且可以引用state中的状态来设置相关的样式；

• 内联样式的「优点」:

  1. 内联样式, 样式之间不会有冲突

  2. 可以动态获取当前state中的状态

• 内联样式的「缺点」：

  • 1.写法上都「需要使用驼峰标识」

  • 2.某些样式「没有提示」

  • 3.大量的样式, 「代码混乱」

  • 4.某些样式无法编写(比如伪类/伪元素)

• 所以官方依然是希望内联合适和普通的css来结合编写

2.普通的css

• 普通的css我们通常会编写到一个单独的文件，之后再进行引入

• 这样的编写方式和普通的网页开发中编写方式是一致的：

  • 如果我们按照普通的网页标准去编写，那么也不会有太大的问题
  • 但是组件化开发中我们总是希望组件是一个独立的模块，即便是样式也只是在自己内部生效，不会相互影响
  • 「但是普通的css都属于全局的css，样式之间会相互影响」

• 这种编写方式最大的问题是「样式之间会相互层叠掉」

3.css modules

• css modules并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的

• 如果在其他项目中使用, 那么我们需要自己来进行配置，比如配置webpack.config.js中的modules: true等

• 「React的脚手架已经内置了css modules的配置：」

• .css/.less/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等

• 之后就可以引用并且进行使用了

• css modules确实解决了局部作用域的问题，也是很多人喜欢在React中使用的一种方案

• 但是这种方案也有自己的缺陷：

  • 引用的类名，不能使用连接符(.home-title)，在JavaScript中是不识别的
  • 所有的className都必须使用{style.className} 的形式来编写
  • 不方便动态来修改某些样式，依然需要使用内联样式的方式
  • 如果你觉得上面的缺陷还算OK，那么你在开发中完全可以选择使用css modules来编写，并且也是在React中很受欢迎的一种方式

4.认识 CSS in JS

• 实际上，官方文档也有提到过CSS in JS这种方案：

  • “CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义
  • 注意此功能并不是 React 的一部分，而是由第三方库提供 React 对样式如何定义并没有明确态度

• 在传统的前端开发中，我们通常会将结构（HTML）、样式（CSS）、逻辑（JavaScript）进行分离

  • 但是在前面的学习中，我们就提到过，React的思想中认为逻辑本身和UI是无法分离的，所以才会有了JSX的语法
  • 样式呢？样式也是属于UI的一部分
  • 事实上CSS-in-JS的模式就是一种将样式（CSS）也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态
  • 所以React有被人称之为 All in JS

• 当然，这种开发的方式也受到了很多的批评：

  • Stop using CSS in JavaScript for web development

5.认识styled-components

• 批评声音虽然有，但是在我们看来很多优秀的CSS-in-JS的库依然非常强大、方便：

  • CSS-in-JS通过JavaScript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修 改状态等等
  • 虽然CSS预处理器也具备某些能力，但是获取动态状态依然是一个不好处理的点
  • 所以，目前可以说CSS-in-JS是React编写CSS最为受欢迎的一种解决方案

• 目前比较流行的CSS-in-JS的库有哪些呢？

  • styled-components
  • emotion
  • glamorous

• 目前可以说styled-components依然是社区最流行的CSS-in-JS库，所以我们以styled-components的讲解为主

• 安装yarn add styled-components

styleld-components

1.ES6标签模板字符串

• 使用模板字符串来调用函数

• 如果我们在调用的时候插入其他的变量：

  • 模板字符串被拆分了；
  • 第一个元素是数组，是被模块字符串拆分的字符串组合；
  • 后面的元素是一个个模块字符串传入的内容；

• 在styled component中，就是通过这种方式来解析模块字符串，最终生成我们想要的样式的

2.styleld-components的安装和插件

• styled-components的安装
  • yarn add styled
• styled-components的插件(这里只演示vscode)
  • 安装: 搜索vscode-styled-components首个插件安装即可
  • 作用: 用于编写css的智能提示和语言高亮

3.styled的基本使用

• styled-components的本质是通过函数的调用，最终创建出一个组件：

  • 这个组件会被自动添加上一个不重复的 class
  • styled-components会给该class添加相关的样式

• 另外，它支持类似于CSS预处理器一样的样式嵌套：

  • 支持直接子代选择器或后代选择器，并且直接编写样式
  • 可以通过&符号获取当前元素
  • 直接伪类选择器、伪元素等

4.props、attrs属性

• props可以穿透

• props可以被传递给styled组件
  • 获取props需要通过 ${} 传入一个箭头函数，props会作为该函数的参数
  • 这种方式可以有效的解决动态样式的问题
• 添加 attrs 属性

const JMInput = styled.input.attrs({
  bColor: 'red'// 定义固定属性值
})`
  background-color: purple;
  border-color: ${props => props.bColor};/* 取出attr中定义的bColor */
  color: ${props => props.color}; /* 取出proops传递的color */
`

<JMInput type="password" color={this.state.color} />

图示

​

4.styled高级特性

支持样式的继承

• 图示

  

const JMButton = styled.button`
  font-size: 20px;
  padding: 10px 12px;
  margin: 10px;
`
// 继承自 JMButton 的默认样式
const JMButtonPrimary = styled(JMButton)`
  color: lime;
  background-color: pink;
`

Theme主题共享

• 图示

  

import styled, { ThemeProvider } from 'styled-components'

// 2.使用提供的Theme
const JMButtonPrimary = styled(JMButton)`
  color: ${props => props.theme.color};
`

export default class App extends PureComponent {
  render() {
    return (
	  // 1.提供Theme  
      <ThemeProvider id="app" theme={{ color: 'red', fontSize: '12px' }}>
        <JMButtonPrimary>Primary主要的按钮</JMButtonPrimary>
      </ThemeProvider>
    )
  }
}

classnames 库

React中添加class

• React在JSX给了我们开发者足够多的灵活性，你可以像编写JavaScript代码一样，通过一些逻辑来决定是否添加某些class：

• 这个时候我们可以借助于一个第三方的库：classnames
  • 很明显，这是一个用于动态添加classnames的一个库

React-Transition-Group

react-transition-group介绍

• 在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验

• 当然，我们可以通过原生的CSS来实现这些过渡动画，但是React社区为我们提供了react-transition-group用来完成过渡动画。

  • React曾为开发者提供过动画插件react-addons-css-transition-group，后由社区维护，形成了现在的react-transition-group。
  • 这个库可以帮助我们方便的实现组件的 入场 和 离场 动画，使用时需要进行额外的安装：
  • npm i react-transition-group -S
  • yarn add react-transition-group

• react-transition-group本身非常小，不会为我们应用程序增加过多的负担。

react-transition-group主要组件

react-transition-group主要包含四个组件：

• Transition
  • 该组件是一个和平台无关的组件（不一定要结合CSS）；
  • 在前端开发中，我们一般是结合CSS来完成样式，所以比较常用的是CSSTransition
• CSSTransition
  • 在前端开发中，通常使用CSSTransition来完成过渡动画效果
• SwitchTransition
  • 两个组件显示和隐藏切换时，使用该组件
• TransitionGroup
  • 将多个动画组件包裹在其中，一般用于列表中元素的动画

CSSTransition

• CSSTransition是基于Transition组件构建的：
  • CSSTransition执行过程中，有三个状态：appear、enter、exit
• 有三种状态, 需要定义对应的CSS样式:

开始状态	执行动画	执行结束
-appear	-appear-active	-appear-done
-enter	-enter-active	-enter-done
-exit	-exit-active	-enter-done

• CSSTransition组件常见对应的属性:
  • in: 触发进入或者退出状态, 根据当前布尔值决定执行动画添加的class
  • in为true时，触发进入状态，会添加-enter、-enter-acitve的class开始执行动画，当动画执行结束后，会移除两个class， 并且添加-enter-done的class
  • 当in为false时，触发退出状态，会添加-exit、-exit-active的class开始执行动画，当动画执行结束后，会移除两个class，并 且添加-enter-done的class

/* 进入 */
.card-enter,
.card-appear {
  opacity: 0;
  transform: scale(0.6);
}
/* 执行动画 */
.card-enter-active,
.card-appear-active {
  transition: opacity 300ms, transform 300ms;
  opacity: 1;
  transform: scale(1);
}

.card-done,
.card-appear {
}
/* 离开 */
.card-exit {
  opacity: 1;
  transform: scale(1);
}

.card-exit-active {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 300ms, transform 300ms;
}

.card-exit-done {
  opacity: 0;
}

CSSTransition组件常见属性

属性名	描述
classNames	决定了在编写css时，对应的class名称：比如card-enter...
timeout	过渡动画的时间,是控制添加class或unmountOnExit的时间
appear	是否在首次进入添加动画（需要和in同时为true）对应的calss
unmountOnExit	退出后卸载组件,组件元素卸载掉

其他属性可以参考官网来学习

CSSTransition组件常见的钩子函数

钩子函数	描述
onEnter	在进入动画之前被触发
onEntering	在应用进入动画时被触发
onEntered	在应用进入动画结束后被触发
onExit	开始退出动画触发
onExiting	正在退出退出时触发
onExited	退出完成触发

下拉查看

SwitchTransition

• SwitchTransition可以完成两个组件之间切换的炫酷动画：

  • 比如我们有一个按钮需要在on和off之间切换
  • 我们希望看到on先从左侧退出，off再从右侧进入
  • 这个动画在 vue 中被称之为 vue transition modes
  • react-transition-group中使用SwitchTransition来实现该动画

• SwitchTransition中主要有一个属性：mode，有两个值

  • in-out：表示新组件先进入，旧组件再移除
  • out-in：表示就组件先移除，新组件再进入

• 如何使用SwitchTransition呢？

  • SwitchTransition组件里面要有CSSTransition或者Transition组件，不能直接包裹你想要切换的组件
  • SwitchTransition里面的CSSTransition或Transition组件不再像以前那样接受in属性来判断元素是何种状态，取而代之的是key属性

TransitionGroup

• 当我们有一组动画时，需要将这些CSSTransition放入到一个TransitionGroup中来完成动画：

最后

如果文章对你有帮助求个👍，最近一直在准备redux系列全面总结，这两天准备再整理整理发布，希望到时候各朋友捧个场