react
文章平均质量分 56
ANKG
这个作者很懒,什么都没留下…
展开
-
【react】react18的学习(十二)– 底层原理(二)之 迭代器 iterator
是一种 ES6 规范,具有这种机制的数据结构才可以使用。属性的数据结构都具备;如数组、部分类数组、字符串等;for-of循环原理:循环获取属性值;循环:返回每一项的值;原创 2023-07-23 19:37:12 · 706 阅读 · 0 评论 -
【react】react18的学习(十一)– 底层原理(一)之 diff 算法
第二轮对比是以新虚拟dom的顺序从第一轮中断的位置开始依次进行,不是与映射表相同索引节点比较,而是去映射表找相同key值的节点比较,并给映射表的节点做相应标记;最多两轮后,依次得到:要删除的8、要更新的或复用的4(只内容不同或相同)、要移动位置的6、要新增的2,不变的不做标记;对比过程中,第一轮对比:按链表顺序对比,节点key值相同进一步比较标签、内容,并进行标记;第二轮对比,是新的虚拟dom从第一轮中断的位置开始与fiber链表的map映射表对比;处理:要删除的、不变的和复用的、移动的、新增的;原创 2023-07-19 21:08:58 · 1495 阅读 · 0 评论 -
【react】react18的学习(十)–路由react-router-dom@6
【代码】【react】react18的学习(十)–路由react-router-dom@6。原创 2023-06-11 19:00:19 · 791 阅读 · 0 评论 -
【react】react18的学习(九)–路由react-router-dom@5
路由传参:三种:query传参、路径传参、隐式传参(刷新参数会丢失)原创 2023-06-04 18:33:05 · 1088 阅读 · 0 评论 -
【react】react18的学习(八)–mobx介绍
也是代替原生redux的公共状态管理方式;mobx@5版本需要浏览器支持es6 proxy,且使用了许多装饰器;mobx@6移除了装饰器语法;原创 2023-05-14 18:57:46 · 433 阅读 · 1 评论 -
【react】react18的学习(七)--redux-toolkit
与react-redux:前者是简化store的创建;后置是简化store的使用,且针对redux、redux-toolkit的store均有封装;替代原生redux创建store,简化store的创建;原创 2023-05-08 21:17:15 · 218 阅读 · 0 评论 -
【react】react18的学习(六)--redux中间件
上一篇:react18的学习(五)–样式私有化原创 2023-04-26 22:03:16 · 221 阅读 · 0 评论 -
【react】react18的学习(五)--样式私有化
方式三:【公共样式可用,原生css写法】CSS Modules:1、以Nav.module.css为样式文件;闭包思想:使用函数执行返回函数组件,函数组件内部嵌套当前组件;可用于动态组件、类组件使用hooks;,这个对象是键值对,以css中类名为键,以生成的唯一值为值;vue中scoped,react中没有;方式一:【个别样式可用】行内样式。原创 2023-04-16 17:32:17 · 669 阅读 · 0 评论 -
【react】react18的学习(四)--复合组件通信
与类组件一样,区别就是使用hooks函数组件语法;且后代组件也有两种方式:标签、的结合,定义上下文对象,在祖先组件使用并传值,子孙组件使用;2、类组件使用:祖先组件提供方式1种;子孙组件使用方式2种。一般使用props、状态管理,比较常用,上下文比较难维护;包括父子、及更深层嵌套,就是借助一个共同组件上下文。借助上下文对象:类似vue事件总线。1、创建指定上下文对象。3、hooks组件使用。原创 2023-04-15 19:44:44 · 1052 阅读 · 0 评论 -
【react】react18的学习(三)--hooks组件
【代码】【react】react18的学习(三)--hooks组件。原创 2023-04-08 21:54:10 · 648 阅读 · 0 评论 -
【react】react18的学习(二)-三种组件
【代码】【react】react18的学习(二)原创 2023-03-11 20:39:04 · 849 阅读 · 0 评论 -
【react】解决babel-preset-react-app报错
报错:Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: undefined.原创 2023-03-11 19:06:26 · 2976 阅读 · 0 评论 -
【react】react18的学习(一)-基本配置
react18原创 2023-03-01 22:00:30 · 967 阅读 · 0 评论 -
【react】扩展知识点
1、setStatesetState本身是同步的函数,引起的后续动作(状态更新)可能是异步的;即当前方法执行完再更新; state = { num: 0, }; add = () => { const { num } = this.state; this.setState({ num: num + 1 },()=>{ console.log(this.state.num); //1 }); console.log(this.s原创 2022-04-17 17:44:07 · 802 阅读 · 0 评论 -
【react】react支持less的两种方案(参考antd)
前言create-react-app默认配置了sass,只需要安装依赖包即可,使用sass/scss文件;npm install sass-loader sass --save-devoryarn add sass-loader sass1、安装修改配置的依赖包对 create-react-app 的默认配置进行自定义,这里我们使用 react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案)。 yarn add react-app-re原创 2022-01-24 21:33:13 · 2519 阅读 · 0 评论 -
【react】react v16.13知识点总结(三)
十九、react中路由:react-router-dom(^5.2.0)官网路由地址1、安装:npm install react-router-dom2、导入路由HashRouter:Route:Link:import {HashRouter,Route,Link} from 'react-router-dom'原创 2020-09-27 11:33:49 · 171 阅读 · 0 评论 -
【react】react v16.13知识点总结(二)
十五、react中有无状态组件间的应用2、jsx语法中的样式行内样式:style={ 对象 }<h1 style={{ color:'red',fontSize:'24px',textAlign:'center' }}>这是列表案例</h1>也可以抽离出来对象:const listStyle = { color:'red',fontSize:'26px',textAlign:'center' }<h1 style={listStyle}>这是列表案例<原创 2020-09-19 19:30:02 · 221 阅读 · 0 评论 -
【react】react v16.13知识点总结(一)
一、react中的虚拟DOMreact中组件化是直接使用js实现,vue中通过.vue文件实现;在vue中模板template(模板结构)->ast(普通对象)->render函数(带变量的函数对象)->虚拟dom(赋值的函数对象);在react中直接js->虚拟dom;使用虚拟dom,页面源码中是没有相应的dom标签,页面中元素都来自于引入的js文件;浏览器也不用解析相应html元素,直接解析js,形成真正的dom。DOM本质:就是指用js对象表示的UI元素;是原创 2020-09-14 22:46:31 · 527 阅读 · 0 评论