- 博客(103)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 react私有样式处理
人为保持最外层组件样式的唯一性 -》css modules -》 react-jss（css in js）-》以上方案可以在项目中综合使用，css-in-jss用一种，然后混合用行内等，两种及以上综合起来用一种。把css写在js中，把样式编写在style.div的模板字符串中，然后导出一个自定义组件。js中的封装特点 变量，来实现编程化的样式编写。在HOC可以另外再单独自定义一些逻辑，再作一些处理把加工后的属性传给最终demo。props是先传给HOC，再传给最终渲染的组件demo。
2025-06-05 16:54:12
539
原创 复合组件通信
导入context对象，设置静态私有属性contextType，react内部会把context对象挂载到实例上。contextType只有一个，但是Context.Consumer可以嵌套多层，但是这种情况很少。核心思想就是创建上下文对象，祖先组件通过provider把信息放到上下文中，后代组件从上下文中获取。通过设置contextType静态属性，这样就在实例上挂载了context对象。或者使用consumer组件，里面有一个函数，参数是context。主导因素是父亲，父亲传数据，传回调，……
2025-06-05 16:52:42
283
原创 useMemo & useCallback & 自定义hook
传一个函数，可以把这个函数用useCallback包裹。但是使用注意📢 ，useCallback没有特别明显的优化。useMemo & useCallback & 自定义hook。的时候，才去重新计算；其他状态变化时则不去做不必要的计算。usePartialState封装。子组件用React.memo包裹。把公共部分提取出来作为公共逻辑。*合适的场景——父传子。
2025-06-02 19:55:22
243
原创 TASK OA 案例hook
趋势：useMemo useCallback 做优化的，自定义hook， useContext useReducer。使用async/await 不用想配套使用 try/catch。初次渲染拉取query。useEffect(..., [])两大稍微比较难的组件：table 和 form。尽可能使用组件库antd内部提供的方法。此时要用useEffect去做。TASK OA 案例hook。状态更新useEffect。
2025-06-02 19:53:18
256
原创 hook组件-useEffect、useRef
callback的返回值只能是一个函数。被async修饰了，返回的是一个promise所以不行。配合React.forwardRef，拿到的是函数组件中的某个dom元素。会把callback或者返回的小函数加入effect链表中，然后按照规则执行。配合forwardRef获得函数组件中的某个元素。执行自己的链表之前，把上次链表中需要执行的执行。重新执行不会再生成新的。，不会重新创建实例，对ref对象没有影响。返回一个小函数，会在组件释放的时候执行。函数组件中的ref用法。virtual dom生成的时候。
2025-06-02 19:52:07
230
原创 案例：TASK OA
只要执行setState，即使状态值一模一样，会把jsx重新编译成virtual dom，然后会把新的vm和老的vm对比若没有一样的只是视图不会再更新了；生成virtural dom：jsx编译成createElement，然后create再执行；jsx语法&底层渲染机制、函数组件&类组件、合成事件、webpack&脚手架……antd内部会自动按需导入，打包只会打包引入的；基于form & form.item 实现表单数据的收集，并且能实现规则校验。后期状态要改变，且改变了视图要更新的。
2025-06-02 19:50:36
244
原创 hooks组件-useState
使用Object.is去判断，比如NaN，===是false，但是Object.is是true。全局肯定会有多个状态，依赖于每个useState<->每个状态肯定会有多个映射。拿到我的属性，也知道哪个组件，那所以也就是把属性传过来，组件函数重新执行。hook组件的本质就是函数组件，但是基于各种hook让其动态化！一个方法拿到的机制是不一样的？useImperativeHandle：拿到子组件的属性和方法。useState以及底层：每次都是全新私有上下文。prev是上次函数执行结果的返回值。
2025-06-02 19:48:59
299
原创 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
788
原创 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
688
原创 react基础语法视图层&类组件
有哪些标签节点，dom节点有什么特征特点，有什么属性，有什么内容……我们一般从3个维度去分析遍历对象属性的api：公有还是私有，是否可枚举，是否symbol。我们一般认为，仅私有，全部（不仅仅可枚举），全部（不仅仅非symbol）是比较好的。构建数据构建视图，数据驱动的思想。这一套是非常相似的。React.createElement的返回结果就是我们的虚拟dom，即jsx对象。基本component开头，将要都是will，已完成都是did，，不仅实现了数据驱动视图，视图也驱动数据，反向地视图驱动数据，
2025-03-11 22:44:15
969
原创 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
429
原创 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
532
原创 网络分层及三次握手
在传输数据层要先建立连接 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
423
原创 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
1474
原创 data数据响应式
自己构造的原型对象：重写了7个方法=>先调用原始的数组原型链上的方法以实现数据层面的更新；能执行到observer里的，要么是对象要么是数组。属性：既不可更改，也不可删除（configurable/writable）数组来讲，并不是对每一项索引项进行劫持，而是重写原型指向（7个方法）对象来讲，Object.keys可枚举&非Symbol类型属性。react：数字 字符串，原始值/其他类型都渲染为空。MV原理：其中一条线的原理，data响应式的原理。重写原型：重写原型指向，自己构造了一个原型对象；
2023-12-23 16:59:47
230
原创 vue $nextTick & 样式私有化
forceUpdate->sub.update() // 把更新操作放在队列里面。先updated中更新，再nextTick。template中各dom元素；基于发布订阅模式，callbacks队列。style中每个类都会加上属性选择器。同步执行完之后，把当前放到队列中。没有加scoped，都是全局样式。人为控制：最外层组件类名的唯一性。组件id：data-v-xxx，整套在进行单文件编译的时候，更新完毕后会依次执行。
2023-12-03 09:08:42
228
原创 虚拟列表方案实现
UI渲染的时机——在微任务清空之后 下一个宏任务执行之前，都会进行一次渲染。分片加载：缺点是最终页面上还是有很多元素。因为预估的高度是不准确的，所以每次渲染完之后 动态重新计算滚动条多高。，等于每个应用都是一个进程(当然也有一个应用有很多进程)，浏览器：会把所有dom都存起来，再一次性append。里面scroll-bar：整个所有的高度。scroll-list：仅m个的展示内容。最外层：视口区域的高度。先存储一个预估的高度列表。remain：仅展示的个数。:size=30 依然需要。
2023-11-06 18:01:49
184
原创 vue2组件库-上传组件
我自己身上有一份数据，用户的数据也格式化放到这个数组里不涉及什么子改父父改子，自己处理自己的数据。弄一个数据同步v-model或.async，我就给你一个数据。谁在谁里面，怎么触发这个事件，事件都有哪些问题。处理上传前+上传中+上传成功的各状态展示。具体位置：用js算left top的值。跟上传强关联的属性，上传必备的字段。fileList中每个对象的状态。文件变化了，触发文件变化的钩子。上传fileList数据构造。类型：拖拽 多个文件上传。不希望它有什么同步的功能。自己创建的一个文件对象。
2023-10-28 10:08:04
1307
原创 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
323
空空如也
判断一个数是不是素数的方法
2015-04-14
水仙花数代码如何减短运行时间
2015-03-15
TA创建的收藏夹 TA关注的收藏夹
TA关注的人