![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
react知识积累
累了你就写会代码吧
越自律,越自由
展开
-
reac移动端适配的rem文件
参考一下代码:!(function (e, i) { var t = e.documentElement, n = navigator.userAgent.match(/iphone|ipod|ipad/gi), a = n ? Math.min(i.devicePixelRatio, 3) : 1, m = 'orientationchange' in window ? 'orientationchange' : 'resize'; t.d原创 2021-03-29 11:50:01 · 84 阅读 · 0 评论 -
react脚手架和postcss-pxtorem配合使用
postcss-pxtorem 官方文档在react项目中安装postcss-pxtorem并且指定一下版本号,因为不指定会安装最新的postcss-pxtorem,建议使用自己熟悉的稳定版本的postcss-pxtoremyarn add postcss-pxtorem@5.1.1安装完成在webpack.config.js 目录下面配置安装好的postcss-pxtorem 配置如下代码部分:参数具体说明参考上面的官方文档require('postcss-pxtorem')({.原创 2021-03-29 10:53:17 · 2030 阅读 · 0 评论 -
使用react脚手架添加webpack的less文件的支持
场景:使用react的脚手架创建的基础项目默认是支持sass文件的,如何让webpack也支持less的配置呢首先将webpack的配置文件放出来具体操作步骤可以参考我的上篇博客https://blog.csdn.net/weixin_43956521/article/details/115177830在项目中安装less和less-loadernpm i less less-loaderoryarn add less less-loader打开webpack.config.js 搜索原创 2021-03-26 16:26:51 · 188 阅读 · 0 评论 -
使用react脚手架将webpack配置项暴露出来
1、通过react脚手架创建的项目里面查看package.json 文件内部有eject的命令,而eject命令就是可以暴露出webpack脚手架的配置的选项npm run ejectoryarn eject注意:这操作是不可逆的有时候我们去运行次命令的时候回报错,根据提示错误信息去解决然后运行此命令即可可能出现的异常报错有将脚手架创建的项目的本地未跟踪的文件添加到暂存区域config文件就是webpack的配置文件目录...原创 2021-03-24 15:16:39 · 906 阅读 · 0 评论 -
使用react脚手架搭建项目
1、安装react脚手架npm install -g create-react-apporyarn add global create-react-app2、使用react的脚手架创建测试项目(项目名称全小写)create-react-app reactdemo3、通过命令行cd到使用react脚手架创建的reactdemo项目进行安装依赖yarn ornpm install4、启动项目yarn startornpm run start启动成功后看到react的界面就说原创 2021-03-24 15:03:30 · 153 阅读 · 0 评论 -
React中workingProgress Fiber树存在的意义是什么
React中workingProgress Fiber树存在的意义是什么在React中最多会同时存在两棵Fiber树,当前显示在页面是current Fiber树,在内存中构建的Fiber树称为workInProgress Fiber树,workingProgress Fiber这棵树是在内存中构建的,构建完成才统一替换,这样不会产生不完全的真实dom。一旦更新完成,react会直接将current树替换成workingProgress Fiber树,以便快速完成DOM的更新。也是react提升性能的一原创 2021-02-20 16:20:34 · 357 阅读 · 0 评论 -
React16版本中commit阶段的三个子阶段分别作了什么事情
React16版本中commit阶段的三个子阶段分别作了什么事情commit阶段是同步执行,不可被中执行DOM操作前,处理类组件的getSnapshotBeforeUpdate声明周期函数执行DOM操作,根据effectTag进行dom操作,将workingProgress Fiber树变成current Fiber树执行DOM操作后,调用生命周期函数和钩子函数...原创 2021-02-20 16:19:33 · 294 阅读 · 0 评论 -
React16版本中render阶段放弃了使用递归
React16版本中render阶段放弃了使用递归在16之前的版本中采用递归执行。递归耗内存,它使用 JavaScript 自身的执行栈,更新一旦开始,中途就无法中断。程序就会一直占用线程,又因为js是单线程语言,导致在递归时,如果发生用户交互行为,页面将无法相应用户行为,造成用户体验上的卡顿在React16中(使用fiber架构可拆分,可中断任务),使用循环代替递归,当页面发生用户交互行为,循环可以被打断,优先执行用户交互行为,大大提升了用户体验。被打断的循环可以再次执行,以完成程序的运行。.原创 2021-02-20 16:18:06 · 220 阅读 · 1 评论 -
React16版本中初始渲染的流程
React16版本中初始渲染的流程render阶段 为每一个react元素构建对应的fiber对象,在构建fiber对象的过程中,要构建其对应的DOM对象,并且还要为fiber对象添加effectTag属性,就是标注当前fiber对象要对应的DOM操作(增删改),这个新构建的fiber对象称之为workInProgress fiber树,待提交的fiber树,将构建好的workInProgress存储在fiberRoot.finishedWork中,render阶段结束。commit阶段 先获取原创 2021-02-20 16:15:22 · 318 阅读 · 0 评论 -
在react项目中播放svga动画
1、首先在react项目中安装下第三方包svgaplayerwebyarn add svgaplayerweb -Dornpm i svgaplayerweb -D2、存放svga资源文件source.jsexport const svga = { "sky":'sky.svga',}3、封装好的svga.js 文件import { svga} from './source.js'; //svga的资源文件位置const SVGA = require('svga原创 2020-12-12 14:09:36 · 1638 阅读 · 0 评论 -
react 强制文本内容换行
css文件里面设置属性white-space: pre-wrap;然后文本使用“\n” 即可进行文本换行react的jsx文件的render函数中在标签中使用dangerouslySetInnerHTML通过添加br 标签进行文字换行原创 2020-12-09 17:10:28 · 2925 阅读 · 0 评论