- 博客(18)
- 收藏
- 关注
RSS订阅原创 useState和 useCallback的区别
useState和是 React 中两个不同的 Hook，它们用于不同的目的。useStateuseState是一个 Hook，用于在函数组件中添加状态。它返回一个状态值和一个函数，用于更新该状态。useState是一个 Hook，用于返回一个记忆化的回调函数。它接收一个回调函数和一个依赖数组，只有在依赖数组中的值发生变化时，才会重新创建回调函数。
2024-08-08 22:55:20
326
原创 react18中如何避免不必要的渲染
在 React 18 中，避免不必要的渲染仍然是提升应用性能的关键。React 18 引入了一些新的特性和改进，但许多避免不必要渲染的最佳实践仍然适用。以下是一些具体的方法和技巧：在 React 18 中，避免不必要的渲染仍然是提升应用性能的关键。通过使用React.memouseMemo和等技术，可以有效地减少不必要的渲染。此外，避免在 JSX 中使用匿名函数和内联对象，以及在列表渲染中使用唯一的key属性，也有助于减少不必要的渲染。React 18 引入的新特性如和进一步增强了对渲染性能的控制。
2024-08-08 21:52:56
326
原创 react18中的组件通信方式
React 18 中组件通信的方式有很多，选择哪种方式取决于具体的需求和应用的复杂度。父子组件通信：通过 props 传递数据和回调函数。兄弟组件通信：通过共同的父组件共享状态。使用 Context API：适用于跨越多个层级的组件通信。使用 Redux：适用于大型应用中的复杂状态管理。使用事件总线：通过发布/订阅模式在组件之间传递消息。每种方式都有其适用的场景和优缺点，开发者可以根据具体需求选择合适的方式来实现组件之间的通信。
2024-08-08 21:22:12
388
原创 前端如何做视频防盗链
视频防盗链: 是指防止他人未经授权直接链接和播放你网站上的视频内容。前端开发可以采取一些措施来防止视频盗链，但通常需要与后端和服务器配置相结合来实现更有效的防护。
2024-08-06 18:33:29
497
原创 搞懂事件循环机制
实际上如果同时存在两个 script 代码块，会首先在执行第一个 script 代码块中的同步代码，如果这个过程中创建了微任务并进入了微任务队列，第一个 script 同步代码执行完之后，会首先去清空微任务队列，再去开启第二个 script 代码块的执行。ES6 规范中，宏任务（Macrotask） 称为 Task， 微任务（Microtask） 称为 Jobs。宏任务是由宿主（浏览器、Node）发起的，而微任务由 JS 自身发起。打印结果为： 1，7，6，8，2，4，3，5，9，11，10，12。
2024-06-27 16:15:40
285
原创 关于h5移动端开发问题整理
同一个列表的图片，上方显示了一个轮播图，有的轮播图指示器显示，有的不显示。开启硬件加速，影响元素的层叠顺序，并且将元素置于一个更靠近观察者的平面。当希望文本只保留一行时。当文本需要保留多行时。
2024-03-25 16:52:33
291
原创 react路由v5
Switch的作用是循环遍历子节点childrens数组，依次和当前路由进行匹配，只要匹配到就结束循环，返回匹配到的路由。Switch进行路由匹配时，遍历的子节点只是一级子节点，并不会去遍历孙节点。所以，Route、Redirect只能作为Switch的一级子节点，如果有嵌套路由，每级路由都需要加上Switch。创建一个组件，只要组件被挂载或更新时，就会执行重定向。注意，这个组件内部是不进行路由匹配的，Redirect本身是不进行路由匹配的，所以需要依赖Switch的路由匹配逻辑。
2023-12-22 18:21:50
370
原创 React Hooks
使用hooks理由1. 高阶组件为了复用，导致代码层级复杂2. 生命周期的复杂3. 写成functional组件,无状态组件 ，因为需要状态，又改成了class,成本高
2023-12-13 17:59:42
399
1
原创 vue2组件通信和vue3组件通信的方式
使用场景:[子给父传递数据]儿子$emit----> 父亲$on[简写@]父亲中的两种写法:[简单写法|复杂写法]mounted(){自定义事件子向父传递数据事件类型 回调函数 谁调用 默认传递的是什么?1、事件类型 无数个2、回调函数 自己去定义的3、谁调用 自己去调用自己使用$emit触发调用的4、默认传递的是什么?默认传递的是自己给的参数有就有，没有就没有 (undefined)
2023-09-13 20:33:49
125
1
原创 前端跨域的处理方式
b.qq.com 设置document.domain为qq.com，那么他俩就能互相通信了，不受跨域限制了。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；(做法:动态插入script标签，设置其src 属性指向提供JSONP 服务的URL地址，查询字符串中加入 callback 指定回调函数，返回的 JSON 被包裹在回调函数中以字符串的形式被返回，需将 script标签插入 body 底部)。
2023-08-23 22:01:41
69
原创 前端性能优化技巧
data中的所有数据都会被劫持，所以将数据尽可能扁平化，如果数据只是用来渲染可以使用Object.freeze，可以将数据冻结起来，这样就不会增加getter和setter。，其他非响应式数据不需要放在data中，data中的数据都会增加getter和setter，会收集对应的 watcher，这样就会降低性能。因为组件粒度最细，改组件的数组，它只会渲染当前的组件。造成进入首页时，需要加载的内容过多，时间过长，会造成长时间的白屏，即使做了loading也是不利于用户体验，
2023-08-22 22:50:04
135
1
原创 时间复杂度和空间复杂度
每次i乘以2之后，就距离n更近了一分。也就是说，有多少个2相乘后大于 n，则会退出循环。由2^x=n得到x=log₂N。所以这个循环的时间复杂度为O(logn)两层嵌套for循环，而该循环执行了n²次，因此时间复杂度为O(n²)；只有一层for循环，而该循环执行了n次，因此时间复杂度为O(n)；执行当前算法需要占用多少内存空间。
2023-08-12 18:12:19
60
1
原创 nextTick的原理
Vue有个异步更新策略，如果数据变化，它不会立刻更新DOM，而是开启队列，把组件更新函数保存在队列中，在同一事件循环中发生的所有数据变更, 会异步的批量更新。这导致对数据的修改不会立即体现在DOM上，此时如果要获取更新后的DOM状态，就需要使用nextTick。由于JavaScript是单线程的, 所以js是通过事件循环机制来实现单线程一异步的。在事件循环中，有一个概念叫做“任务队列”。任务队列中保存了需要在事件循环中执行的任务，这些任务分为两种类型︰宏任务和微任务。是等待下一次DOM更新刷新的工具方法。
2023-08-08 21:25:36
99
原创 webpack常用配置
loader 就是将各种类型的文件转换成 webpack 能够处理的模块，一个实际开发中经常接触到的例子：项目中使用了 less 语法，就需要使用 less-loader 去将其转译为 css，然后通过 css-loader 去加载 css 文件，处理后交给 style-loader，最后把资源路径写入到 html 中的 style 标签内生效。: loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务,例如打包优化，资源管理等。: 指引webpack将打包好的文件放到哪里。
2023-08-08 17:50:46
284
原创 强缓存和协商缓存的区别
缓存的原理是在首次请求后保存一份请求资源的响应副本，当用户再次发起相同请求后，如果判断缓存命中则拦截请求，将之前存储的响应副本返回给用户，从而避免重新向服务器发起资源请求。私有缓存指的是只能单独被用户使用的缓存，如浏览器缓存。算是前端开发中最常接触的缓存机制之一，它又可细分为强制缓存和协商缓存，二者最大的区别在于判断缓存命中时，浏览器是否需要向服务器端进行询问以协商缓存的相关信息，进而判断是否需要就响应内容进行重新请求。
2023-08-06 23:07:38
83
原创 vue2和vue3的区别
Vue2使用的是选项类型APl (Options API)，Vue3使用的是合成型API(Composition APl)Vue3:数据和方法都定义在setup中，并统一进行return{}
2023-07-25 20:05:50
746
原创 vue2.0响应式原理详解1
是响应式属性的方法内部的一个闭包，可以理解成为该属性关联的一个对象，而dep内部保留着属性的watcher，只要调用属性的set方法，属性值改变就会调用到dep.notify,从而依次调用内部保留的watcher的update方法，从而更新页面, 也可以理解为。只有watcher触发的getter才会收集依赖，哪个watcher发了getter，就把哪个watcher收集到Dep中。把依赖收集的代码封装成一个Dep类，它专门用来管理依赖，每个Observer的实例，成员中都有一个Dep的实例;
2023-07-25 13:29:52
83
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人