- 博客(96)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 ref & setState & 合成事件
合成事件委托给root，捕获和冒泡阶段做了，16 委托到document上，只做了冒泡阶段，并且是 onXXX和onXXXCapture一起执行。语法：给ref=xxx赋一个值，然后通过this.refs.xxx就可以获取到相应dom元素，通过你这个名字存储的值就是这个dom元素。当是函数组件，使用React.forwardRef，能够获取子组件内部的dom元素。事件是默认的行为，这个行为只要被触发了这个动作只要有了，这个事件行为就已经被触发了。当给类组件设置ref，ref是子组件实例。
2025-03-21 23:24:08
760
原创 ref & setState & 合成事件
合成事件委托给root，捕获和冒泡阶段做了，16 委托到document上，只做了冒泡阶段，并且是 onXXX和onXXXCapture一起执行。语法：给ref=xxx赋一个值，然后通过this.refs.xxx就可以获取到相应dom元素，通过你这个名字存储的值就是这个dom元素。当是函数组件，使用React.forwardRef，能够获取子组件内部的dom元素。事件是默认的行为，这个行为只要被触发了这个动作只要有了，这个事件行为就已经被触发了。当给类组件设置ref，ref是子组件实例。
2025-03-21 22:17:33
651
原创 react基础语法视图层&类组件
有哪些标签节点，dom节点有什么特征特点，有什么属性，有什么内容……我们一般从3个维度去分析遍历对象属性的api：公有还是私有，是否可枚举，是否symbol。我们一般认为，仅私有，全部（不仅仅可枚举），全部（不仅仅非symbol）是比较好的。构建数据构建视图，数据驱动的思想。这一套是非常相似的。React.createElement的返回结果就是我们的虚拟dom，即jsx对象。基本component开头，将要都是will，已完成都是did，，不仅实现了数据驱动视图，视图也驱动数据，反向地视图驱动数据，
2025-03-11 22:44:15
937
原创 react工程化开发
数据层改了，vue自己会监听到帮我们拿最新的数据去渲染视图；构建数据构建视图，数据驱动的思想。babel-preset-react-app 对@babel/presest-env的重写，使其能识别react的语法。规则配置项通过module.exports导出，导出一个函数，未来这个函数一定会执行。，不仅实现了数据驱动视图，视图也驱动数据，反向地视图驱动数据，视图中的内容改变，比如一个input，vue。全局命令create-react-app。业务组件 & 通用组件。*区别mvc&mvvm。
2025-02-28 14:29:39
402
原创 react概览&webpack基础
less预编译成css，css兼容：css3加前缀-moz等，@import、url特殊语法导入外部资源，css打包单独成文件或内嵌……缺点：前置导入，把所有的模块先导入，才能把函数执行。替换style-loader：css代码依然在js中，只是动态创建了style标签。或者导出一个对象，对象key的值是已经定义的变量。打包编译优化压缩，自己本地启动一个web服务，用本地服务先把开发东西预览。零配置下，less编译成css、图片、es6转es5都无法处理。数据、结构、样式都返回。绝对地址：用path模块。
2025-02-10 20:59:58
508
原创 网络分层及三次握手
在传输数据层要先建立连接 websocket：双工。通信过程中链路会发生转换，但是网络层寻址是不变的。2个地址：ip:逻辑地址；真正一帧的内容：1460，tcp就要分段。20个头部 1500个字节-20-20。cdn&dns（包括cdn）的原理。tcp：安全 udp：快 丢就丢了。，dhcp：动态主机分配协议。具体的seq ack 及过程。每层协议指的就是约定和规范。数据传输 服务器如何响应。ip地址不变，mac会变。传输层：tcp/udp。tcp3次握手4次挥手。
2024-01-17 08:32:33
412
原创 vue2中的指令
视图编译，v-if/v-show等编译成一个对象，对象中指令的名字、值，渲染的时候根据指令的名字和值来控制。单行文本框/文本域：v-model状态值是什么就显示什么，@input/@change，都会去做事件绑定，input或者change事件，然后拿到表单项的值或者选中去修改状态值。给函数了传递参数，这样就不需要bind那些，因为是根据vue内部视图编译机制有关。视图编译先编译v-for，循环每一项创建一个li，v-for立即创建；的时候，识别v-xxx，对不同指令做不同处理。v-if：移除dom结构。
2023-12-27 16:25:59
1454
原创 data数据响应式
自己构造的原型对象：重写了7个方法=>先调用原始的数组原型链上的方法以实现数据层面的更新；能执行到observer里的，要么是对象要么是数组。属性：既不可更改，也不可删除（configurable/writable）数组来讲，并不是对每一项索引项进行劫持，而是重写原型指向（7个方法）对象来讲，Object.keys可枚举&非Symbol类型属性。react：数字 字符串，原始值/其他类型都渲染为空。MV原理：其中一条线的原理，data响应式的原理。重写原型：重写原型指向，自己构造了一个原型对象；
2023-12-23 16:59:47
211
原创 vue $nextTick & 样式私有化
forceUpdate->sub.update() // 把更新操作放在队列里面。先updated中更新，再nextTick。template中各dom元素；基于发布订阅模式，callbacks队列。style中每个类都会加上属性选择器。同步执行完之后，把当前放到队列中。没有加scoped，都是全局样式。人为控制：最外层组件类名的唯一性。组件id：data-v-xxx，整套在进行单文件编译的时候，更新完毕后会依次执行。
2023-12-03 09:08:42
223
原创 虚拟列表方案实现
UI渲染的时机——在微任务清空之后 下一个宏任务执行之前，都会进行一次渲染。分片加载：缺点是最终页面上还是有很多元素。因为预估的高度是不准确的，所以每次渲染完之后 动态重新计算滚动条多高。，等于每个应用都是一个进程(当然也有一个应用有很多进程)，浏览器：会把所有dom都存起来，再一次性append。里面scroll-bar：整个所有的高度。scroll-list：仅m个的展示内容。最外层：视口区域的高度。先存储一个预估的高度列表。remain：仅展示的个数。:size=30 依然需要。
2023-11-06 18:01:49
161
原创 vue2组件库-上传组件
我自己身上有一份数据，用户的数据也格式化放到这个数组里不涉及什么子改父父改子，自己处理自己的数据。弄一个数据同步v-model或.async，我就给你一个数据。谁在谁里面，怎么触发这个事件，事件都有哪些问题。处理上传前+上传中+上传成功的各状态展示。具体位置：用js算left top的值。跟上传强关联的属性，上传必备的字段。fileList中每个对象的状态。文件变化了，触发文件变化的钩子。上传fileList数据构造。类型：拖拽 多个文件上传。不希望它有什么同步的功能。自己创建的一个文件对象。
2023-10-28 10:08:04
1253
原创 UI组件库基础
全局注册组件 & 并且使用了require.context。宽高 padding都不写，只设置border的话，@media：媒体查询。微调，指定大小基于它微调。相对于页面根元素大小设置rem值。中间子盒子width:100%，左右盒子定位。已知宽高：margin-left/calc。移动&PC：共用一套页面。@media：基于设备尺寸写多套样式。未知宽高：transform。左中右：左右固定，中间伸缩。vw/vh：百分比布局。盒子左右padding。@each：循环语句。通过flex值来设置。
2023-10-28 10:07:12
313
原创 async await
什么叫生成器，带*的function就是生成器函数，我们去调用生成器函数并不会去执行，而是会返回一个迭代器对象。那么我们把function*换成async，yield换成await，那么就理解了async/await了，并且其内部实现已经自带了执行器。什么叫协程，指的就是一个函数执行到一半停止执行，将执行权交由另一个函数，之后执行权收回再恢复执行。一个async函数中遇到await，紧跟在await后面的代码会立即执行，执行完毕之后会跳出当前async函数，让主函数中其他代码执行，那这就是协程。
2023-05-03 09:48:39
937
原创 eventloop
遇到异步代码就会把异步任务被放到event queue里，分为微任务队列和宏任务队列。同步代码执行完后首先会去查看微任务队列，微任务会优先执行，会先把微任务队列清空；到宏任务队列时，会取出宏任务队列的第1个执行，那如果在执行过程中又产生了微任务，则还是先会把微任务清空再往后走，主线程空闲去取微任务。每次event loop都会先把当前循环中产生的微任务先全部清空，再往后走下一个宏任务。代码执行放到栈内存中执行，产生对应的上下文，栈内存和堆内存之外，还会形成2个队列。所以说微任务的优先级是很高的。
2023-05-02 22:33:47
705
空空如也
判断一个数是不是素数的方法
2015-04-14
水仙花数代码如何减短运行时间
2015-03-15
TA创建的收藏夹 TA关注的收藏夹
TA关注的人