- 博客(53)
- 收藏
- 关注
RSS订阅原创 Pinia状态管理工具速成
main.js})export const useCounterStore = defineStore('counter', () => {})这里类似于Vuex中的modulesconst count = ref(0)这里类似于Vuex中的stateconst doubleCount = computed(() => count.value * 2)这里类似于Vuex中的gettersfunction increment() {count.value++}这里类似于Vuex中的actions。
2025-05-05 11:32:19
334
原创 Vue之VueRouter&Vuex
在使用vue/cli创建项目时下载vue router和vuex或则创建一个简单的项目后再下载vue router和vuexnpm i vuex当然要注意好自己的vue版本下载这两个。
2025-05-04 21:11:22
567
原创 解决Vue2------You may use special comments to disable some warnings.问题
打开项目中.eslintrc.js在rules中，添加以下代码，并extends的 '@vue/standard'注释掉。
2025-05-04 17:04:16
168
原创 React18组件通信与插槽
在react中jsx中的标签属性被称为PropsDOM组件的类属性，为了防止与js中的class属性冲突改成了classNameDOM组件的style属性JSX的展开语法效果是一样的。
2025-05-03 21:21:47
569
原创 react18基础速成
npx create-react-app my-react-app（项目名）cd 项目名进入项目目录终端输入 npm start 启动项目浏览器查看项目搭建成功。
2025-05-03 16:43:04
510
原创 Vue2基础速成
首先下载vue2的JavaScript库，并且命名为vue.min.js（若链接失效可去vue官网寻找）CTRL+S即可下载保存文件目录结构。
2025-05-01 15:09:37
245
原创 闭包陷阱的成因与解法
react中的hook是以链表的形式存在，且执行逻辑依赖于deps。useState闭包解决办法尝试用函数形式。useEffect闭包解决办法常使用ref。setInterval形成了一个闭包。使用ref作为全局变量去处理。state以函数的形式执行。
2025-04-30 16:19:03
161
原创 react18中，为什么选择messagechannel来让出执行权？
浏览器：帧率：我们一般所理解的动画，是一帧一帧的图片就行快速切换得到的一般浏览器是60帧，16.666ms为一帧人的眼睛一般20帧左右就可以感觉比较流畅的动画了浏览器一帧里做了哪些事情？| 宏任务 | 微任务 | requestAnimationFrameWork | layout | requestIdelCallback |稳定是16.666ms吗？不一定，可能宏任务因复杂任务执行时间过长，导致layout没有执行，会造成一个输入延迟的问题，给人的体验感为浏览器卡顿。
2025-04-30 15:38:56
148
原创 react native和react在跨端架构上有什么区别？
react native:使用了一个类似div的标签，最终是调用原生API进行渲染。本质还是JS和native通信，所以有异步和序列化的问题。比如连续手势的卡段，数据序列化的耗时。react:相当于我们还是写的div，最终是app里嵌入了一个浏览器进行渲染。
2025-04-30 14:56:58
389
原创 说一下react更新的流程
增和改 placementAndUpdate 6 0110。使用v-dom和current fiber去生成子节点的workInProgress Fiber。增placement 2 0010。删deletion 8 1000。把我所有有effectTag的元素，串联成一个effectList。期间会执行函数组件、类组件、diff子节点。给我需要变更的节点，打赏effectTag。处理effectList。构建真实的DOM，但是不挂载在界面上。
2025-04-28 18:58:42
355
原创 react中有哪几种数据结构？分别是干什么的？
总结：react调和的过程，就是current fiber 和v-dom的对比，生成子组件workInProgress fiber的过程。状态更新时生成的，在我的react完成调和，commitWork更新之后，会切换成current fiber。是通过函数组件执行的返回值或者类组件render函数的返回值得到。当前react内存中，表示当前数据状态的核心数据结构。
2025-04-28 18:47:09
350
原创 说说stack reconciler 和fiber reconciler
fiber通过return、child、sibling之间的关系，构成了不递归的关系。dom的本质是一颗树，那我们遍历dom的时候一定会递归。
2025-04-28 18:25:43
144
原创 为什么之前react组件要写import React from ‘react‘,现在又不用了？
对于React来说，去解析jsx的语法，主要依靠的是babel，module的中的@babel/preset-react。runtime：automatic模式。runtime:classic模式。
2025-04-23 18:00:18
158
原创 react-router-dom v6提供了哪些新的API能力？
提供了很多API,例如：useNavigate、useLocation、useParams。Outlet占位符，对标vue的<router-view/>已经没有以前的component了，均使用element。
2025-04-18 10:44:51
155
原创 什么是HOC，以及常用的方式？
HOC定义：高阶组件（Higher - Order Component，简称 HOC）是一种在 React 中用于复用组件逻辑的高级技术。它本质上是一个函数，这个函数接收一个组件作为参数，并返回一个新的组件。返回的新组件可以在原组件的基础上添加新的功能、修改组件的行为或者修改组件的属性（props）等。
2025-04-18 10:16:42
177
原创 useLayoutEffect和useEffect有什么区别呢？
useInsertionEffect比useLayoutEffect更早，useInsertionEffect执行时，DOM还没有更新。useLayoutEffect的cb，是同步执行的，执行时机是DOM更新之后，视图绘制完成之前，这个时间可以更方便的修改DOM。useEffect的cb，准确的来说，是异步调用的，会等主线程任务执行完成，DOM更新，JS执行完成，视图绘制完成，才执行。本质上uesInsertionEffect主要是解决CSS-in-JS在渲染中注入样式的性能问题。
2025-04-17 23:53:55
135
原创 react版本有什么区别？
legacy模式，create-react-app 创建的项目、默认的模式；fiber reconciler解决了 递归产生的爆栈的问题。stack reconciler 更多的是class的写法。concurrent模式，支持高优先级打断低优先级。17.0.2为主的版本下。支持高优先级打断低优先级。
2025-04-17 23:10:40
111
原创 什么是Fiber?
Fiber是React 17.x 引入的一个数据结构，本质是为了使之前的 stack reconciler 变成 fiber reconciler。本质就是一个数据结构，一个对象。
2025-04-17 22:58:01
178
原创 为什么会有hooks?
这里如果是这样的话，普通的function函数的上下文发生了变化，需要进行事件绑定才可解决，所以需要hook。例子，解释了为什么需要hook。
2025-04-17 17:25:30
105
原创 hook的使用，有哪些注意方式？
只能在react函数组件和以use命名开头的（自定义hook）中使用。不能写在循环、条件或者其它函数中，需要确保hook是最外层调用的。不能在普通的JS函数中使用hook。这种用法就不会报错了。
2025-04-17 17:13:26
147
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人