react样式，请求，动画相关知识点（三）

最新推荐文章于 2025-03-10 08:30:00 发布

原创最新推荐文章于 2025-03-10 08:30:00 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

前端专栏收录该内容

20 篇文章

订阅专栏

React (样式,axios,动画)

组件化天下的CSS

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

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方案，但是到目前为止也没有统一的方案；

内联样式

内联样式是官方推荐的一种css样式的写法：
- style 接受一个采用小驼峰命名属性的 JavaScript 对象，，而不是 CSS 字符串；
- 并且可以引用state中的状态来设置相关的样式
内联样式的优点:
- 1.内联样式, 样式之间不会有冲突
- 2.可以动态获取当前state中的状态
内联样式的缺点：
- 1.写法上都需要使用驼峰标识
- 2.某些样式没有提示
- 3.大量的样式, 代码混乱
- 4.某些样式无法编写(比如伪类/伪元素)
所以官方依然是希望内联合适和普通的css来结合编写；

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中是不识别的；
- p 所有的className都必须使用{style.className} 的形式来编写；
- 不方便动态来修改某些样式，依然需要使用内联样式的方式；
如果你觉得上面的缺陷还算OK，那么你在开发中完全可以选择使用css modules来编写，并且也是在React中很受欢迎的一种方式。

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
- https://hackernoon.com/stop-using-css-in-javascript-for-web-development-fa32fb873dcc

认识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的讲解为主；

ES6标签模板字符串

ES6中增加了模板字符串的语法，这个对于很多人来说都会使用。
但是模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）。
我们一起来看一个普通的JavaScript的函数：
正常情况下，我们都是通过函数名() 方式来进行调用的，其实函数还有另外一种调用方式：
如果我们在调用的时候插入其他的变量：
- 模板字符串被拆分了
- 第一个元素是数组，是被模板字符串拆分的字符串组合
- 后面的元素是一个个模板字符串传入的内容
在styled component中，就是通过这种方式来解析模块字符串，最终生成我们想要的样式

styled的基本使用

styled-components的本质是通过函数的调用，最终创建出一个组件：
- 这个组件会被自动添加上一个不重复的 class；
- styled-components会给该class添加相关的样式；
另外，它支持类似于CSS预处理器一样的样式嵌套
- 支持直接子代选择器或后代选择器，并且直接编写样式
- 可以通过&符号获取当前元素；
- 直接伪类选择器、伪元素等；
通过创建 styled.元素标签的形式创建一个包裹器，将包裹器包裹子代元素，通过模板语法写样式，且定义的包裹器会有一个独一无二的className, 样式可以根据less sass的写法

props、attrs属性

props穿透
- 定义的包裹器组件可以写属性，样式可以通过 .attrs（{}）的方式拿到绑定的属性
props可以被传递给styled组件
- 获取props需要通过${}传入一个插值函数，props会作为该函数的参数；
- 这种方式可以有效的解决动态样式的问题；

styled高级特性

支持样式的继承

const HyButton = styled.button`
	padding:8px 30px;
	border-radius:5px;
`
const HYWarnButton = styled(HYButton)`
	background-color: red;
	color:#fff;
`

styled设置主题

import {ThemeProvider} from 'styled-components'

<ThemeProvider theme={{color:"red" fontSize:"30px"}}>
    <Home />
    <Profile />
</ThemeProvider>
    
    
const ProfileWrapper = styled.div`
	color:${props => props.theme.color};
	font-size:${props => props.theme.fontSize}
`

classnames库的使用

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'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'

Antdesign库

认识craco

上面的使用过程是无法对主题进行配置的，好像对主题等相关的高级特性进行配置，需要修改create-react-app的默认配置
如何修改create-react-app的默认配置呢
- 前面我们讲过，可以通过yarn run eject 来暴露出来对应的配置信息进行修改
- 但是对于webpack并不熟悉的人来说，直接修改CRA的配置会给你的项目带来负担，甚至增加项目的隐患和不稳定性
- 所以，在项目开发中是不建议大家直接去修改CRA的配置信息的
那么如何来进行修改默认配置呢？社区目前有两个常见的方案：
- react-app-rewired + customize-cra （这是antd早期推荐的方案）
- craco （目前antd推荐的方案）

Craco使用步骤

1.安装craco yarn add @craco/craco
2,修改package.json 文件
- 原本启动时，我们是通过react-script来管理的
- 现在启动时，我们通过craco来管理
3.在根目录下创建craco.config.js文件用于修改默认配置

配置主题

按照配置主题的要求，自定义主题需要用到类似 less-loader 提供的 less 变量覆盖功能：
- 我们可以引入 craco-less 来帮助加载 less 样式和修改变量；
安装 craco-less：
- yarn add craco-less
修改craco.config.js中的plugins：
- 使用modifyVars可以在运行时修改LESS变量；
引入antd的样式时，引入antd.less文件
- import 'antd/dist/antd.less';
修改后重启 yarn start，如果看到一个绿色的按钮就说明配置成功了。

配置别名

在项目开发中，某些组件或者文件的层级会较深
- 如果我们通过上层目录去引入就会出现这样的情况：…/…/…/…/components/button
- 如果我们可以配置别名，就可以直接从根目录下面开始查找文件：@/components/button，甚至是：components/button
配置别名也需要修改webpack的配置，当然我们也可以借助于 craco 来完成：

... 
const path = require("path"); 
const resolve = dir => path.resolve(__dirname, dir);
module.exports = { 
  ..., 
  webpack: { 
    alias: { 
      '@': resolve("src"), 
      'components': resolve("src/components"), 
		} 
	} 
}

axios库

前端网络请求选择

1.原生XMLHttp请求 Ajax
2.fetch API
3.axios

axios的配置信息

1.请求配置选项
2.响应结构信息
3.全局默认配置

axios.defaults.baseURL = 'https://api.example.com'
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

4.自定义实例默认配置：

const instance = axios.create({
    baseURL : 'https://aps.example.com'
})

instance.defaults.headers.common['Authorization'] = AUTH_TOKEN

优先是请求的config参数配置；
其次是实例的default中的配置；
最后是创建实例时的配置

axios拦截器

axios库有一个非常好用的特性是可以添加拦截器：
请求拦截器：在发送请求时，请求被拦截；
- 发送网络请求时，在页面中添加一个loading组件作为动画
- 某些网络请求要求用户必须登录，可以在请求中判断是否携带了token，没有携带token直接跳转到login页面
- 对某些请求参数进行序列化；
```
axios.interceptor.request.use(回调函数1，回调函数2)
```
响应拦截器：在响应结果中，结果被拦截；
- 响应拦截中可以对结果进行二次处理（比如服务器真正返回的数据其实是在response的data中）；
- 对于错误信息进行判断，根据不同的状态进行不同的处理；

axios.interceptors.response.use(回调函数1，回调函数2)

为什么要二次封装？

为什么我们要对axios进行二次封装呢？
- 默认情况下我们是可以直接使用axios来进行开发的；
- 但是我们考虑一个问题，假如有100多处中都直接依赖axios，突然间有一天axios出现了重大bug，并且该库已经不再维护，这个时候你如何处理呢？
- 大多数情况下我们会寻找一个新的网络请求库或者自己进行二次封装；
- 但是有100多处都依赖了axios，方便我们进行修改吗？我们所有依赖axios库的地方都需要进行修改；

react过度动画

react-transition-group介绍

在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验
当然，我们可以通过原生的CSS来实现这些过渡动画，但是React社区为我们提供了react-transition-group用来完成过渡动画
React曾为开发者提供过动画插件 react-addons-css-transition-group，后由社区维护，形成了现在的 react-transition-group
- 这个库可以帮助我们方便的实现组件的入场和离场动画，使用时需要进行额外的安装：
- ```
# npm npm install react-transition-group --save
# yarn yarn add 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、-enter、exit
- 第二类：执行动画：对应的类是-appear-active、-enter-active、-exit-active；
- 第三类：执行结束：对应的类是-appear-done、-enter-done、-exit-done
CSSTransition常见对应的属性：
in：触发进入或者退出状态
- 如果添加了unmountOnExit={true}，那么该组件会在执行退出动画结束后被移除掉；
- 当in为true时，触发进入状态，会添加-enter、-enter-acitve的class开始执行动画，当动画执行结束后，会移除两个class，并且添加-enter-done的class；
- 当in为false时，触发退出状态，会添加-exit、-exit-active的class开始执行动画，当动画执行结束后，会移除两个class，并且添加-enter-done的class

CSSTransition常见属性

classNames：动画class的名称
- 决定了在编写css时，对应的class名称：比如card-enter、card-enter-active、card-enter-done；
timeout：
- 过渡动画的时间
appear：
- 是否在初次进入添加动画（需要和in同时为true）
unmountOnExit：退出后卸载组件
其他属性可以参考官网来学习：
- https://reactcommunity.org/react-transition-group/transition
CSSTransition对应的钩子函数：主要为了检测动画的执行过程，来完成一些JavaScript的操作
- onEnter：在进入动画之前被触发；
- onEntering：在应用进入动画时被触发；
- onEntered：在应用进入动画结束后被触发

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属性；