风清云淡_A-CSDN博客

Immutable.js出自Facebook，是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。所有的更新操作都会返回新的值，但是在内部结构是共享的，来减少内存占用在上一篇介绍redux的文章，我们可以看到在创建的reducer中进行数据更改的时候，会使用…来复制状态数据，为的就是不对原数据进行直接修改，只做替换，就是为了实现react的数据不可变immutable。

2024-10-25 13:44:39 547

原创 r18中使用redux管理公共数据仓库怎么实现

创建一个仓库，这个仓库的参数是我们创建的一个个reducer,每个reducer里面有两个参数，一个初始状态state作为数据源，一个根据不同操作更新数据的actiongetState获取store中的所有数据状态dispatch是页面其他地方比如按钮，生命周期中，触发更新状态数据subscribe是在dispatch出发更新，订阅更新状态，获取最新的数据状态是subscribe返回值，用来在组件销毁时清除订阅，提升性能。

2024-10-25 09:18:04 288

原创 react18中的useEffect和useLayoutEffect的原理分析

函数组件在渲染（或更新）期间，遇到 useEffect 操作，会基于 MountEffect 方法把 callback（和依赖项）加入到 effect 链表中！1、按照顺序执行期间，首先会检测依赖项的值是否有更新「有容器专门记录上一次依赖项的值」；清除函数的副作用,比如在组件卸载时清除定时器,且在里面函数里面获取的状态是上次更新的状态，不是当前最新的值，所以需要使用 useRef 保存状态。2、遇到依赖项是空数组的，则只在第一次渲染完毕时，执行相应的 callback。useEffect 的原理。

2024-10-24 10:09:54 654

原创 react18中的合成事件与浏览器中的原生事件

React 通过将事件 normalize 以让他们在不同浏览器中拥有一致的属性。合成事件SyntheticEvent 实例将被传递给你的事件处理函数，它是浏览器的原生事件的跨浏览器包装器。除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。如果因为某些原因，当你需要使用浏览器的底层事件时，只需要使用 nativeEvent 属性来获取即可。合成事件与浏览器的原生事件不同，也不会直接映射到原生事件。

2024-10-23 14:50:33 971

原创 react18&16中的setState同步还是异步的深层分析

setState 是 react 中更新 UI 的唯一方法，其内部实现原理如下：调用 setState 函数时，React 将传入的参数对象加入到组件的更新队列中。React 会调度一次更新（reconciliation），在调度过程中，React 会根据组件的 state 和 props 来计算出组件的新的状态，并比较新旧的状态，决定是否需要重新渲染组件。

2024-10-23 11:33:42 565

原创 react18中的受控与非受控组件及ref的使用

原理：render 函数执行的时候，获取 vdom 的 ref 属性，然后根据 ref 的值去 dom 树中找对应的节点。非受控组件，基于 ref 获取 dom 的值，来实现页面的更新,不推荐使用,偶尔特殊的场景会使用。受控组件,基于修改 state 的值,修改组件内部的状态，来实现页面的更新，推荐使用。

2024-10-23 09:39:21 604

原创 react18中的函数组件底层渲染原理分析

插槽的作用，就是将父组件中的内容，原封不动的传递给子组件。想办法让组件更加灵活，具有更强的复用性。总结: 被冻结的对象，既是不可扩展的，也是密封的。被密封的，也是不可扩展的。元素,是数组的情况下，要使用下面的方式来接收，也可以使用。属性时，需要先拷贝一份，然后才能修改。插槽内容可以根据不同的需求，放到不同的位置。children 属性，传递子组件的。所以，我们在组件内部修改。html 片段用插槽。里面的方法来进行处理。

2024-10-22 11:36:52 526

原创 react18中的jsx 底层渲染机制相关原理

虚拟 dom 对象，是框架内部构建的一套对象体系，对象相关的属性方法都是 react 内部规定的，基于这些属性描述出，我们所有构建的视图中，dom 节点相关的特征。真实 dom，就是浏览器页面中，让用户看到的页面内容。执行后，会生成一个虚拟 dom 对象。，jsx 最终会被编译成。

2024-10-22 10:15:58 596

原创 react18中在列表中如何使用useCallback进行渲染优化

实现的需求：在列表中如何缓存每个子组件，父组件重新渲染，子组件不更新，下面的列子假设Chart组件被包裹在memo中。你希望在ReportList组件重新渲染时跳过重新渲染列表中的每个Chart。但是，你不能在循环中调用。

2024-10-21 16:32:51 538

原创 react18中的计算属性及useMemo的性能优化技巧

react18里面的计算属性和使用useMemo来提升组件性能的方法。

2024-10-18 15:35:37 455

原创 react18中在列表项中如何使用useRef来获取每项的dom对象

在react中获取dom节点都知道用ref，但是在一个列表循环中，这样做是行不通的，需要做进一步的数据处理。

2024-10-18 10:36:19 586

原创 react18中如何实现同步的setState来实现所见即所得的效果

在react项目中，实现添加列表项，最后一项自动显示在可视区域范围！！

2024-10-17 17:38:31 555

原创 react18中如何监听localstorage的变化获取最新的本地缓存

以上是比较常见的两种简单的方法，当然还有其他的实现，比如事件轮询，对进行封装拦截等等，都可以去尝试下，有空我再补充完善吧。

2024-10-17 10:27:44 534

原创 react18中实现简易增删改查useReducer搭配useContext的高级用法

useReducer和useContext前面有单独介绍过，上手不难，现在我们把这两个api结合起来使用，该怎么用？还是结合之前的简易增删改查的demo，熟悉vue的应该可以看出，vuexuseContext类似于vue中的enjectprovided`,来分析下思路。

2024-10-16 10:07:36 590

原创 react18中实现简易增删改查useReducer的用法

reducers必须是纯函数，纯洁性原则一个reducer只做一件事，单一职责原则。

2024-10-14 14:25:08 297

原创 react实现实时计时的最简方式

js中时间的处理，不借助于moment/dayjs这样的工具库，原生获取格式化的时间，最简单的实现方式可以参考下面这样。

2024-10-10 16:02:30 587

原创 vue3.5系列之响应式props解构的几点技巧对比

在最新的版本3.5x中，对props的能力也进行了加强。下面，我们具体看下有哪些变化，给我们带来的新的体验！

2024-10-10 09:15:25 441

原创 vue3.x系列之封装响应式的hooks技巧

这里我们传入的是一个url接口的ref,不是普通的字符串数据hooks里面接收的时候，接口请求使用toValue转为普通的字符数据监听副作用，当ref数据变化时，及时响应来发起新的请求delay方法模拟接口请求延时效果，区分出请求中的状态。

2024-10-09 17:07:31 473

原创 vue3.x系列之v-model的使用技巧及面试高频问题

在前面的一篇文章中，我们分析了v-model在v2版中的用法。这次我们分析下在v3中的使用技巧。学习之前，请忘记之前的v2语法，现在的更加简洁易用。

2024-10-09 10:55:11 552

原创 uniapp中在web端如何友好的展示app当前的版本等信息

一个小技巧，分享下在webapp中友好展示当前app信息的方法。

2024-09-30 14:12:32 526

原创 uniapp中检测应用更新的两种方式-升级中心之uni-upgrade-center-app

uniapp一个很是用的功能，就是在我们发布新版本的app后，需要提示用户进行app更新，并告知用户我们新版的app更新信息，以使得用户能及时使用上我们新开发的功能，提升用户的实用度和粘性。

2024-09-30 11:43:12 733

原创 vue项目中的node、node-sass、sass-loader之间的版本关系

这个报错，想必大部分人都会遇到，版本不适配的问题，记录下解决方案。

2024-09-27 11:03:24 327

原创 MVC、MVP和MVVM三种设计模式之间的区别是什么

在MVC中，View会直接从Model中读取数据而不是通过 Controller；View和 Controller之间存在多对一关系。在MVP中，View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，所有的交互都发生在Presenter内部；View和Presenter之间是一对一关系。

2024-09-21 11:51:48 1282

原创 vue2基础系列教程之动态组件component你不得不知道的知识点及面试高频问题

component动态组件语法一般是配合is属性来实现的。在一个多标签的界面中使用is来切换不同的组件。

2024-09-18 15:02:31 722

原创 vue2基础系列教程之插槽slot你不得不知道的知识点及面试高频问题

slot的精讲

2024-09-18 12:39:14 495

原创 uniapp导入iconfont报错的处理方法Uncaught Error: Cannot find module ‘./common/iconfont.woff2?t=1726398902942‘

控制台报错消失了，说明我们的配置生效了。

2024-09-15 22:44:12 296

原创 vue2基础系列教程之v-model及面试高频问题

根据 vue 的设计理念，自定义组件上的属性和事件，会默认绑定到组件的根元素上，如果想要绑定到组件的原生事件上，需要使用.native修饰符。也就是我们在组件内部不使用 props 进行显示的接受，这些属性和事件会默认的绑定到组件的根元素上。这三个属性我在组件内部没有使用 props 进行接受，但是却可以正常的使用。data() {return {message: "请输入要显示的文字",},methods: {

2024-09-14 18:01:43 722

原创 vue2基础系列教程之todo的实现及面试高频问题

v-for迭代的数据可以是array，也可以是object,如果是object，则内部使用的Object.keys进行的迭代。v2里面，当在同一个元素或组件上同时使用v-for和v-if,v-for的权限高于v-if。v-show和v-if的区别主要有。

2024-09-14 14:59:22 636

原创 react18基础教程系列-- 框架基础理论知识mvc/jsx/createRoot

支持 js 表达式，包括函数调用，变量引用，三目运算，逻辑运算等。

2024-09-12 17:18:31 523

原创 react18基础教程系列--安装环境及packagejson文件分析

【代码】react18基础教程系列--packagejson文件分析。

2024-09-12 13:43:54 615

原创 nodejs基础教程之-异步编程promise/async/generator

所谓"异步"，简单说就是一个任务分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段,比如，有一个任务是读取文件进行处理，异步的执行过程就是下面这样。当你在执行一个函数的时候，你可以在某个点暂停函数的执行，并且做一些其他工作，然后再返回这个函数继续执行，甚至是携带一些新的值，然后继续执行。当你在执行一个函数的时候，你可以在某个点暂停函数的执行，并且做一些其他工作，然后再返回这个函数继续执行，甚至是携带一些新的值，然后继续执行。相应地，连续的执行，就叫做同步。

2024-09-12 11:47:05 1211

原创 java中的泛型

java中的泛型是伪泛型。

2024-09-11 14:02:10 249

空空如也

vue3里的ref和shallowRef在同一个组件里面出现，ref的更新会影响到showllowRef