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} />

<details>
<summary>图示</summary>

</details>

4.styled高级个性

反对款式的继承

  • <details>
    <summary>图示</summary>

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

Theme主题共享

  • <details>
    <summary>图示</summary>

    </details>
import styled, { ThemeProvider } from 'styled-components'// 2.应用提供的Themeconst 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退出后卸载组件,组件元素卸载掉

[其余属性能够参考官网来学习](https://reactcommunity.org/re...
)

CSSTransition组件常见的钩子函数

钩子函数形容
onEnter在进入动画之前被触发
onEntering在利用进入动画时被触发
onEntered在利用进入动画完结后被触发
onExit开始退出动画触发
onExiting正在退出退出时触发
onExited退出实现触发

<details>
<summary>下拉查看</summary>

</details>

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系列全面总结，这两天筹备再整顿整顿公布，心愿到时候各敌人捧个场

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系列全面总结，这两天筹备再整顿整顿公布，心愿到时候各敌人捧个场