- 博客(19)
- 收藏
- 关注
RSS订阅原创 react ref处理
我们创建一个变量，初始值是undefined 我们把第一次创建出来的ref对象给到该变量，当我们点击按钮让视图更新的话，是新创建出的ref对象 也就是新的堆内存地址 遇到createRef都会创建出一个新的REF对象出来 这样比较浪费性能。此时在子组件内部 如过我们把转发的ref的值赋值给子组件的某个ref属性 这样在父组件中 就可以直接获取到子组件的真实DoM。（2）子组件是函数组件 ： 直接会报错，子组件不能直接设置 ref。@2 给子组件设置ref，在类组件中Ref的设置方式。
2023-09-12 16:37:07
408
1
原创 react 的useEffect / useLayEffect
它会阻碍GUI线程的渲染，会等到视图的，也就是再通知Effect链表callback函数执行的时候，浏览器停止对真实DoM的绘制，需要先把Effect中的所有的callback执行完毕 在去绘制，所以我们使用useLayoutEffect的时候 不会看到视图的闪烁，所有的操作都是一样的 只不过是在渲染Effect链表的时候，不同的是useLayoutEffect是等到Effect链表中的函数都执行完成后才去渲染。组件销毁之前 就是在useEffect的函数中return一个函数。
2023-09-11 22:26:23
257
原创 react 的函数 setState
2 当然可以执行一次useState 只不过创建的状态 ，需要是一个对象，对象中包含了需要是一个对象 而对象中包含了需要的其他状态的值 通过在handle 成员访问的方式+1 而这个useState返回值的第二个参数的set更改状态的方法 本身不支持部分状态更改的（修改之后 这个状态的整体被替换为我们setxxx的值） 所以我们要是通过这个方式修改状态的话 一定要经过对象的浅拷贝 而且是在修改状态之前完成拷贝的操作，在修改的时候没改的用原始值，改变的地方用新改的值。
2023-09-11 15:31:44
251
原创 react合成事件
React16中 处理合成事件的处理机制不同，对于合成事件的处理，和reacat18也是不一样的，对于合成事件的处理 和React18是不一样的 在16的版本中 存在事件池机制 用的合成事件对象只有一个，每- -次事件触发，都是把最新的合成对对象值去改为最新的值 但是一旦用完 就把这些值又释放掉了。合成事件是围绕着浏览器的原生事件，充当跨浏览器的包装对象，他们将不同浏览器的行为合并成为一个API,这样做的目的就是为了确保事件在不同的浏览器上显示一致的属性。
2023-09-10 20:09:53
257
1
原创 合成事件react
什么是事件： 浏览器赋予元素天生默认的这种行为 叫做事件，即便元素什么都不处理，元素该具备的都有在mdn的官网上可以查看到给元素的某个事件行为绑定一个方法，目的是让元素触发某个方法，执行某些事件对应的方法，完成一写指定的需求，叫做事件绑定，完成指定的需求DoM0级事件绑定：box.onClick - function(){…}原理就是： 给元素对象的onxxx,事件私有属性赋值 因为这个原理所导致一些细节： （1）我门只能给其绑定一个方法，绑定第二个方法 会覆盖
2023-09-10 16:11:30
117
1
原创 setState React
在类组件中 当视图开始编译 代码从上而下开始执行的时候发现一个setState 就会放到 updater中，（并不会立即的更改状态 视图也不会立即的更新） 而是把我们的更新操作加入到更你队列中去，而在浏览器的EventQueue一个队列中存在一个异步的宏任务， 中存在一个updater中的任务执行的异步任务（等到js的主线程空闲且同步代码执行完毕下来时候 去通知updater中的队列中的任务执行）在react 18框架中，setState操作都是异步的 是经过一个队列的机制 来处理异步的。
2023-09-10 13:42:34
184
1
原创 git知识点
分支在实际中有什么用呢？假设你准备开发一个新功能，但是需要两周才能完成，第一周你写了50%的代码，如果立刻提交，由于代码还没写完，不完整的代码库会导致别人不能干活了。如果等代码全部写完再一次提交，又存在丢失每天进度的巨大风险。大概的意思就是 我们的git分支的意思就是 多人协作开发时候我们可以利用自己的分支来实现 我们自己的这一条的业务代码的开发 并且 不耽误其他人。
2023-09-08 15:59:27
86
1
原创 webpack 的优化路由的懒加载
如果你想将 source map 嵌入到 bundle 文件中，可以使用 inline-source-map。inline-cheap-module-source-map: 生成包含 loader 的 source maps 的 source map，但是将 source map 转为 DataUrl 嵌入到 bundle 文件中。cheap-module-source-map: 生成包含 loader 的 source maps 的 source map，且生成单独的 source map 文件。
2023-09-06 15:27:05
464
1
原创 DOM-DIFF原理 （多节点的处理）及个人实现
因为新的比老的数量多，第一轮循环结束的时候，老的已经遍历完成，新的还有剩下的。1.从B开始，把所有的老节点全闻放到一个 map中。再对比B和C，key不一样，则立刻跳出第一轮循环。只有老的或新的遍历完成才会走第2轮循环。全部复用老节点，只更新属性有就可以了。第对比A，key和类型一样，则复用A。如果key不同则立刻跳出第一轮循环。
2023-09-04 16:37:32
188
1
原创 DOM-DIFF（React）原理
JSX是对JS的语法扩展，让我们可以在JS代码中可以编写类似于HTMl的代码虽然JSX看起来像HTML,但是它的本质上JSJSX用来描述UI组件，描述页面需要呈现出什么样子，JSX最终在打包的时候会被babel进行编译，编译成React.createElement为什么使用JSX模板 vue template模板字符串json不引入除了JS之外的开发体系，开发的还是JS避免引入过多的概念更好的代码和编辑器的支持。
2023-09-04 12:35:44
109
1
原创 react render原理
/遍历属性对象的属性的数组 keys for(let key in props)//递归遍历儿子，把每个儿子都变成一个真实DOM元素并且挂载到自己身上。//把虚拟DOM也就是react元素转成真实DOM并且插入container容器中。//遍历所有的儿子，把每个儿子变成真实DOM并且挂载到自己身上。//把虚拟DOM或者说React元素转成真实DOM。//给真实DOM的样式对象赋值。//把转化成的真实DOM插入到DOM容器中。//遍历样式对象的属性的数组。//创建此类型对应的真实DOM元素。
2023-09-04 10:40:22
78
1
原创 react类组件中的ref
就是不受状态管控 直接操作DoM元素，也就是说 我们需要先获取DoM元素，在componentDidMount钩子函数中，等待组件第一次渲染完毕。ref除了可以获取视图中的DoM元素，还可以获取组件的实例，ref绑定一个元素的标签，目的是获取这个真实DoM。ref绑定一个组件，目的是获取组件内部的实例（或者是组件内部的某些元素，再或者是组件暴露出来的属性和方法）基于官方推荐的React.createRef（类组件/函数组件）/useRef（函数组件） 方法 去处理。给ref设置的属性值是个函数。
2023-09-03 23:08:51
383
原创 react 类组件更新
注意：props中的值 直接在生成虚拟DoM的时候直接生成的，而规则校验是在函数执行的时候把props传递进来的进行规则校验的， 即便不符合规则校验的话，也仅仅是在控制台输出警告 但是不影响props中的值。但是在react中原本是不具备插槽这个概念的，但是真实的项目中插槽哈斯有用的，传递html结构和视图，放在组件的指定位置的，基于插槽传递到组件内部的渲染的，依次来增强组件的复用性！在执行这个钩子函数的时候，状态值还没有改变的 （或者可以理解为还没有修改this实例上的属性和状态）
2023-09-03 15:50:58
868
原创 redux koa 中间件
中间件就是一个处理HTTP请求的函数，用来完成某些特定的任务。比如检查用户是否登录，检测用户是否有权限访问，它们的特点。二-个中间件处理完毕的。
2023-09-02 11:37:01
131
1
原创 Express
'user-agent': ' insomnia/2023.4.0',用户代理使用什么客户端发送的请求。host: ' localhost:3000',主机，包括主机名和端口号。中间件就是一个处理HTTP请求的函数，用来完成某些特定的任务。比如检查用户是否登录，检测用户是否有权限访问，它们的特点。中间件 express redux koa。/api/user?id=1 url地址。{ id: '1' }查询字符串对象。## 安装使用express。/api/user请求的路径。二-个中间件处理完毕的。
2023-09-02 11:02:09
70
1
原创 Html初步
href的锚点跳转：第一步要去的那个标签上面设置上id属性，属性值随便取第二步，a标签上的href的属性值前面加上# 可实现跳转，切记：不要将属性和标签的关键字黏在一起，多个属性用空格隔开。1.尖括号包裹的关键字（关键字就是标签名）一般是成对出现。lang = “en” lang是属性名 en是属性值。横向排列 共占一行 可以设置高度。内置属性是自带的 自定义属性是自己写的。2.也可能有单独的标签/自闭和标签。加上 线上的路径和本地的路径。行内元素 span。块级元素 div。
2023-08-10 17:20:21
74
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人