React.js
文章平均质量分 64
前端页面渲染框架
前端江太公
一个理想主义的读书人。前端攻城狮,2021年被评为华为云享专家,阿里云专家博主,前端领域优质创作者等。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
生产环境出问题了,测试环境是好的,怎么办?拉稀了!用这个方法重写浏览器源代码进行调试!
这个不难理解,背过八股文都都知道,vite是利用现代浏览器对ES模块的原生支持,以及HTTP/2服务器推送等技术,实现了快速的开发服务器和按需编译。在开发过程中,Vite会将代码按需编译成原生ES模块,不需要提前打包成bundle文件,从而加快了开发的速度。关于ES模块,就是一种在JavaScript中用于模块化的标准,它允许开发者将代码分割成多个模块,使得代码更易于组织、维护和重用。改完之后会有一个紫色的小点,这个时候,这个已经修改过的代码文件已经保存到本地了,并且,已经把修改过的文件替换到浏览器上了。原创 2024-04-08 14:48:26 · 1167 阅读 · 0 评论 -
学爬虫,吃牢饭,卑微前端小丑复制antd的icon图标真的太难啦,我用python几秒扒完
这才是爬虫的正确使用方法,卑微前端小丑,在线复制antd ui库的icon图标,真的太难啦,改用python几秒扒完原创 2023-05-17 10:12:07 · 1457 阅读 · 1 评论 -
vite入坑之路:react+vite动态导入报错@vite-ignore的解决方法
The above dynamic import cannot be analyzed by Vite. See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ c原创 2023-05-16 10:49:12 · 6133 阅读 · 0 评论 -
在React项目中引入echarts球形水波纹
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bHvx9zrJ-1679034311702)(/upload/2023/03/image-6b5cd80bd2364c31b6aec4ea898d6f00.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iMigiZ45-1679034311703)(/upload/2023/03/image-d6c31d9f276645618e11f7edaad0bc41.png)]转载 2023-03-17 14:27:34 · 1014 阅读 · 1 评论 -
react异常 Each child in a list should have a unique “key” prop
react异常警告:Each child in a list should have a unique “key” prop。加了key为何还报Each child in a list should have a unique “key“ prop。原因:Dom在渲染数组时,需要一个key,不然嵌套数组时会引起歧义。原创 2022-11-28 17:59:11 · 10421 阅读 · 0 评论 -
React :(类、函数)子组件调用父组件的方法
子组件中使用传过来的cancelCreateFile【this.props.cancelCreateFile】,就可以在子组件中调用。原创 2022-08-19 10:59:42 · 4805 阅读 · 0 评论 -
React 父组件调用子组件中的方法,Ref的使用
文章中涉及 ref 的应用仅为父组件调用子组件场景下的应用方式,并未涵盖 ref 的所有应用方式转载 2022-08-19 09:48:09 · 2549 阅读 · 0 评论 -
react-router-dom使用指南(最新V6)
通过嵌套的书写Route组件实现对嵌套路由的定义。path开头为/的为绝对路径,反之为相对路径。可以在任何组件中使用Routes组件,且组件内的Routes中,路径默认带上当前组件的路径作为前缀。注意:此时定义父组件的路由时,要在后面加上/,否则父组件将无法渲染。}使用useRouteshook,可以使用一个JS对象而不是Routes组件与Route组件来定义路由。其功能类似于useRoutes的返回是 React Element,或是 null。children?element?index?...原创 2022-08-17 11:06:06 · 2835 阅读 · 0 评论 -
解决react-router-dom V6路由嵌套时,子路由无法显示的问题
You rendered descendant (or called `useRoutes()`) at "/home" (under ) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never re原创 2022-08-17 10:59:06 · 3775 阅读 · 1 评论 -
react-router v6使用createHashHistory进行history.push时,url改变页面不渲染
在我使用history库的createHashHistory创建history对象时,使用history.push进行页面跳转的时候,url 变化,但是页面没有渲染。③创建组件时,函数式组件只需调用函数即可创建组件,而类组件必须先实例化一个对象,然后通过这个实例化对象调用render函数来创建组件。④类组件是用生命周期钩子函数来实现业务逻辑的,而函数式组件使用react Hooks来实现业务逻辑。函数式组件和类组件都能实现相同的效果。方法只能在函数式组件中使用, 在类组件中是不能够使用hooks的。...原创 2022-08-16 16:50:13 · 2828 阅读 · 2 评论 -
创建React + Ts项目
安装完成后会在项目根目录生成.eslitrc.js文件,然后改一下规则(可以根据自己需求增减规则)8、你希望你的配置文件是什么格式的?(JavaScript,其它的可以自行百度)7、遵循哪一种流行风格?(可以根据自己项目所需定义,我选Airbnb)eslint初始化后会出现三个项目,根据项目而定。6、如何定义项目定义样式?(使用流行的风格指南)1、使用什么样的eslint?2、项目使用什么类型的模块?9、你现在就安装他们吗?(Yes,yarn)3、项目使用哪个框架?...原创 2022-08-15 15:26:56 · 2858 阅读 · 0 评论 -
前端:需要掌握哪些技能才能找到满意的工作?
如果你在找前端工作,你一定求助过不少大佬传授找工作和面试经验,而你得到的答案肯定很多时候就是简单的一句话:把 html、css、 js 基础学扎实,再掌握vue或react前端框架之一就可以了。真的是这样吗?技术上看似乎没问题,但是找工作不只要从技术上下手,还要从个人目标和公司的招人标准综合进行考量,然后你还需要掌握一套有逻辑、有结构的面试回答技巧。接下来我们逐一分析一下,相信你看完之后就有了方向和方法,一定能找到满意的工作。个人目标现在我们的教育并没有太着重于个人目标和职业规划的设定,但找工作与转载 2020-08-21 08:01:06 · 1155 阅读 · 0 评论 -
前端三大主流框架的区别(三)
前面两篇已经做了细致的分析,这一篇就总结总结三大主流框架吧1.angular1.1. 简介:angular是最早出现的框架,angularjs是通过directive(指令)去封装组件,react和vue是通过component。 1.2. 优点:1、背后靠山(google),有着稳定的维护团队。且google的Adwords业务就使用了angular,作为一个赚钱的业务,google也会让它的环境更稳定一些。2、angular+typescript,google和微软的双剑合璧。angu原创 2020-08-15 10:20:26 · 10613 阅读 · 9 评论 -
前端三大主流框架的区别(二)
指令vue 中有指令的概念,vue中指令是以v-开头,常用的指令有:v-if v-for v-on 简写: @ v-bind简写 : v-show等react 中没有指令的概念。比如遍历直接在jsx中使用map,判断用if等原生js的方法angular 中的指令,比如:*ngIf *ngFor *ngSwitchCase模板语法vue 采用双花括号{{}}绑定数据react 采用单花括号{}绑定数据angular 采用双花括号{{}}绑定数据组件vue 中使用Vue.component原创 2020-08-15 10:04:15 · 689 阅读 · 0 评论 -
前端三大主流框架的区别(一)
React与Vue相同点1、使用 Virtual DOM,有较高的运行速度2、提供组件化功能3、可使用mobx与vuex进行状态管理,响应式、依赖追踪React1、子组件重复渲染问题需要手动优化2、可以使用redux进行状态管理,函数式、不可变、模式化,时间旅行3、可使用JSX,完全的javascript能力优点:引入了一个叫做虚拟DOM的概念,运行速度快;提供了标准化的API,解决了跨浏览器问题、兼容性更好;代码更加模块化,重用代码更容易,可维护性高。缺点:React是目标是UI组件,原创 2020-08-15 09:57:05 · 1736 阅读 · 0 评论 -
前端三大主流框架如何去选择?
今天我们聊一聊现在主流的三大前端框架,React、Angular、Vue。em。。。等等,稍微纠正一下,React其实并不能算是真正的前端框架,它其实更类似于像JQuery一样的前端包库。这个定义不重要,React这么流行那我们就把它和Angular、Vue一起聊一聊。先说一下为什么想聊一下这个话题,因为在工作中我发现有的人会React,有的人会Angular,还有的人会Vue,甚至有的人并不会这三个主流框架中的任何一个,而仅仅会JavaScript,而这些朋友统称为前端工程师。哇哦!前端工程师差别这么大原创 2020-08-15 09:55:32 · 1606 阅读 · 0 评论 -
Redux框架之combineReducers() 用法讲解
combineReducers()随着应用变得复杂,需要对 reducer 函数 进行拆分,拆分后的每一块独立负责管理 state 的一部分。combineReducers 辅助函数的作用是,把一个由多个不同 reducer 函数作为 value 的object,合并成一个最终的 reducer 函数,然后就可以对这个 reducer 调用 createStore。合并后的 reducer 可以调用各个子 reducer,并把它们的结果合并成一个 state 对象。state 对象的结构由传入的多个原创 2020-07-15 15:40:17 · 1320 阅读 · 0 评论 -
react的css样式
1、使用React的行内样式设置样式(1)在JSX文件中定义样式变量,和定义普通的对象变量一样let backAndTextColor = { backgroundColor:'blue', color:'#ff671b', fontSize:40};(2)JSX的调用<div style={backAndTextColor}>行内样式测试</div>也可以直接写到JSX中,如下:<div style={{backgroundColo原创 2020-07-14 17:28:23 · 823 阅读 · 0 评论 -
排他性路由和包容性路由 以及react路由
你如果用过vue和react,你会发现,其实他们在某些地方很像的。但我现在想说说两个在路由上的区别。1、vue中的路由是以排他性路由为基础的,意味着只要匹配成功一个就不会往下面进行匹配了2、react中的路由是以包容性路由为基础的,但是也可以转换成排他性路由,用switch,如果你要匹配多个路由,你得在外面加一个盒子,确保唯一子元素,读取时从上往下读,只要有一个匹配就不往下匹配了在react世界中,路由有两种写法和,在navlink中有activeclassname和activestyle,如果你要实原创 2020-07-13 18:57:52 · 738 阅读 · 0 评论 -
VScode中的react自动补全标签代码及黄色or红色警告
解决在vscode中react标签代码不提示的问题:1、作为一个刚开始的react小白,一定有vscode中标签代码不自动提示的烦恼吧:(如下两图,再输入div及input标签的时候没有任何提示,能看到我这个文章的八成就是前端了,都习惯了代码自动补全,突然需要自己手打标签是非常不习惯了,这和在文本文档里面写代码没什么两样)1.2.综上所述,可以看到在react中输入div及input标签不会有任何提示2、这时只需要在设置里添加此项就可以了,复制搜索emmet.includeLanguages原创 2020-07-13 16:46:50 · 6087 阅读 · 1 评论 -
安装react与创建项目
1、安装react.jsnpm install -g create-react-app //安装环境 全局安装2、创建react项目create-react-app my-app //创建应用 应用名称my-app 最好使用正确的路径3、进入项目cd my-app //移动项目4、启动npm start //开始使用...原创 2020-07-05 18:58:55 · 571 阅读 · 0 评论
分享