React
文章平均质量分 83
React相关的内容
一颗冰淇淋
这个作者很懒,什么都没留下…
展开
-
react中使用动画 react-transition-group
在React中通过react-transition-group使用过渡、动画,首先要有CSS3中的过渡和动画的相关知识储备,可以参考 过渡和2D变换、动画和3d变换。我们自己通过css设置过渡、动画,需要给不同的class添加变化属性,比如位移、缩放大小或者旋转角度,再通过切换类名来达到动画的效果,那么在react-transition-group当中,仍然需要在不同的class上定义不同的css样式,简化的是,不需要我们再来进行判断切换类名,它规定了进入动画、退出动画分别的class后缀,我们只需要按原创 2021-04-28 21:02:20 · 518 阅读 · 0 评论 -
一文了解react中定义样式(css/less/sass)的常用方法
react中通过jsx的语法方式,将html标签和js语法联系在一起,而css的编写方式,没有明确的指定编写方式,目前就有很多不同方法,每个方式各有其优缺点,我们一起来看看常用的定义方式有哪些。最基础也是最简单的方式就是如html当中编写样式一样,直接内联使用,区别在于jsx中内联使用样式需要用小驼峰命名,不可使用短横线 -,jsx中编写js的表达式需要使用 {},而定义的样式是以对象的形式存在,也是通过{},所以看起来style标签里面使用了两个大括号{}return(<div style原创 2021-04-14 20:56:01 · 1438 阅读 · 0 评论 -
前端路由原理及react-router的常用组件
在react中,通常都是使用单页面应用(SPA),即整个页面只有一个html,然后通过不同的url地址进行组件的匹配和切换。我们看到的url地址可能会有两种形式,一种是 localhost:3000/home,一种是 localhost:3000/#/home,两种地址的区别在于有无#,有#的是根据hash来进行匹配,即url中的锚点,本质上是通过location.hash来改变href,hash后的内容是不会发送给服务器的,没有#是通过html5的history来进行跳转,两者跳转后都不会进行刷新。原创 2021-04-11 22:51:28 · 306 阅读 · 0 评论 -
react中常见hook的使用方式与区别
1、什么是hook?react hook是react 16.8推出的方法,能够让函数式组件像类式组件一样拥有state、ref、生命周期等属性。2、为什么要出现hook?函数式组件是全局当中一个普通函数,在非严格模式下this指向window,但是react内部开启了严格模式,此时this指向undefined,无法像类式组件一样使用state、ref,函数式组件定义的变量都是局部的,当组件进行更新时会重新定义,也无法存储,所以在hook出现之前,函数式组件有很大的局限性,通常情况下都会使用类式组.原创 2021-04-07 21:00:19 · 898 阅读 · 0 评论 -
redux的三个概念与三大核心
1、什么是redux?一个组件里可能会有很多的状态,比如控制某个内容显示的flag,从后端获取的展示数据,那么这些状态可以在自己的单个页面进行管理,也可以选择别的管理方式,redux就是是一种状态管理的方式。2、为什么要用redux?(1) 数据共享,当我们的很多页面都要用到同一数据时,就可以把数据放到redux中,达到状态共享的目的。(2) 合并管理状态,业务当中可能会有很多的状态需要维护,且各个状态之间可能还有相互依赖的关系,不统一管理的话很难追踪状态的变化。3、redux的基础概念(1原创 2021-04-04 21:34:02 · 847 阅读 · 0 评论 -
React的性能优化
React的更新流程如下,我们可以有两种优化角度1、props/state变化--->render函数变化这个阶段,减少render的执行次数2、新旧DOM树进行diff--->计算出差异进行更新,减少差异的内容一、减少render的执行次数1、类式组件(1)shouldComponentUpdate 当props或者state更新时,render函数就会重新执行,此时我们可以通过生命周期 shouldComponentUpdate来控制是否需要render...原创 2021-03-17 18:51:34 · 235 阅读 · 0 评论 -
React中setState的使用与同步异步
在react中,修改状态如果直接使用this.state,不会引起组件的重新渲染,需要通过 this.setState来对组件的属性进行修改。1、this.setState的两种定义方式定义初始状态state = { count: 0 }如果此时有一个按钮,点击按钮让计数加1,我们可以有两种写法(1)传递对象 this.setState({ count: this.state.count + 1})(2)传递函数 this.setState((state, props) =&..原创 2021-03-14 21:32:48 · 712 阅读 · 0 评论