qq_43748856的博客

原创 React-StrictMode严格模式

早起的Context是通过static属性生命Context对象属性，通过getChildContext返回Context对象等方式来使用Context的。在之前的React API中，可以通过findDOMNode来获取DOM，不过现在已经不推荐使用了，推荐使用ref一层层找。* 这是严格模式下故意行径的操作，让你来查看在这里写的一些逻辑代码被调用多次时，是否会产生一些副作用。5、检测过时的context API。* 生产环境中，是不会被调用两次的。2、使用过时的ref API。

原创 React实现原型图的过程

在验证你应用程序的最小state数据之后，你需要验证哪个组件是通过改变state实现可响应的，或者拥有这个state。3、如果你找不到一个有意义拥有这个state的地方，单独创建一个新的组件去管理这个state，并将它添加到它们父组件上层的某个地方。3、决定state放置的地方：我们将放置过滤文本和勾选state的值于FilterableProductTable中。2、你也可以将state放置于他们父组件上层的组件。1、验证每一个基于特定state渲染的组件。1、验证使用state的组件。

原创 React-获取DOM方式refs

2、但是，在开发中我们可能想要获取函数式组件中某个元素的DOM，这个时候我们应该如何操作呢？1、由于ref不能应用于函数式组件（因为函数式组件没有实例，所以不能获取到对应的组件对象）时，构造函数中使用React.createRef()创建接收。·但是某些时候，我们可能想要获取函数式组件的某个DOM元素。·这个时候我们可以通过React.forwardRef，·后续会学习hooks中如何使用ref。方式二：通过forwardRef高阶函数。方式一：直接传入ref属性（❎的做法）

原创 ReactDay04作业（待完成）

二、面试题：React的setState是同步的还是异步的？React18中是怎样的？三、什么是SCU优化？类组件和函数组件分别如何进行SCU的优化？四、React为什么要强调不可变的力量？如何实现不可变的力量？一、非父子组件的通信有哪些方式？五、React中获取Dom的方式有哪些？

原创 React-非受控组件

2、如果要使用非受控组件中的数据，那么我们需要使用ref来从DOM节点中获取表单数据。4、同样，和支持defaultCheck，和支持defaultValue。·另一种替代方式是使用非受控组件，这时表单数据将交由DOM节点来处理。3、在非受控组件中通常使用defaultValue来设置默认值。·一个受控组件中，表单数据是由React组件来管理的。·使用ref获取input元素。

原创 React-受控组件

3、由于在表单元素上设置了value元素，因此显示的值将始终为this.state.value，这使得React的state成为唯一的数据源。4、由于handleUsernameChange在每次按键时都会执行并更新React的state，因此显示的值将随着用户的输入而更新。在React中，HTML表单的处理方式和普通的DOM元素不太一样：表单元素通常会保存在一些内部的state。1、在HTML中，表单元素（如、和）之类的表单元素通常自己维护state，并根据用户输入进行更新。二、受控组件的基本演练。

原创 React-认识高阶组件

3、mixin非常多时，组件处理起来会比较麻烦，甚至还要为其做相关处理，这样会给代码造成滚雪球式的复杂性。1、HOC需要再元组件上进行包裹或者嵌套，大量使用HOC，将会产生非常多的嵌套，让调试变得非常困难。答：一般如果高阶组件有自己的属性的时候用类组件方便，没有的话用函数组件就可以了。官方定义：高阶组件是参数为组件，返回值为新组件的函数。定义：高阶组件是参数为组件，返回值为新组件的函数。什么时候用函数组件，什么时候用类组件呢？高阶组件本身不是一个组件，而是一个函数。1、接收一个组件作为它的参数。

原创 React组件生命周期

原创 React非父子的通信

原创 setState的使用详解

2、防止state和props的数据不同步的问题，有时候state已经更新了，但还没有执行render方法，而在子组件中引用了state中的数据；1、react18之前，react的一些操作是批处理的，但是像promise、setTimeout和一些原生的js事件比如addClickEvent，这些操作是同步的。1、如果每次执行setState就执行一次render的话，十分消耗性能，所以，react对setState的操作放进了一个队列里面，合并为一次操作，提高了性能。六、setState的使用详解。

原创 FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of me

***

原创 迭代器遍历对象

我们知道对象用in遍历是没有问题的，但是用of遍历时就会报错，info is not iterable，info不是一个可迭代对象。要让对象具有可迭代性，我们要为对象添加一个[Symbol.iterator]的属性，并赋值为返回next形式的方法。可迭代对象会有一个next方法，其会返回一个形式为{done: Boolean, value: any}的对象。首先我们要知道可迭代对象具有什么特征。

原创 构造函数和原型的关系图

原创 重写数组的七个响应式方法

【代码】重写数组的七个响应式方法。

原创 手写简单的响应式原理(包含vue2、vue3)

Vue2的响应式原理也很简单，把reactive部分用Object.defindedProptery实现就好了。

原创 callback处理

使用事件总线或消息队列：可以使用 Vue 的事件总线或者其他的消息队列库（如 RabbitMQ、Kafka 等），将多个组件之间的消息传递抽象成事件或消息，通过订阅或发布等方式实现多个组件之间的通信，从而避免直接传递大量参数。在实际开发中，可以根据项目需求和代码复杂性，选择合适的方式进行优化，并根据实际经验不断实践和总结，以提高代码的可读性和可维护性。总之，在使用 Vuex 管理全局状态时，需要充分考虑到状态的生命周期和销毁，使用命名空间和插件等方式来规范和管理状态，避免全局污染的问题。

原创 vue异步处理

在上述样例代码中，根据组件中的不同条件，使用 await关键字等待异步操作完成，并返回相应的数据。对于多层嵌套的异步操作，可以使用 Promise 和 async/await 组合的方式，将代码逐层拆分为 Promise 和 async/await 结构，并在其中使用 try…在上面的代码中，fetchData1() 函数本身就包含异步操作，因此在其内部使用 Promise 处理异步操作，并在调用 fetchData1()函数的异步函数中使用 await 等待其返回结果。catch 块来捕获异常情况。

原创 Computed

计算属性是 Vue 中常用的一种属性类型，它具有缓存特性，只有在它的依赖发生变化时才会重新计算。计算属性可以依赖于其他计算属性或组件数据属性（Data），并返回一个最终的响应式数据属性，从而简化复杂的计算过程，提高代码的可读性和可维护性。computed 只有在它所依赖的数据发生变化时才会重新计算，因此它具有缓存的特性，可以避免多次计算相同的数据，提高了性能。如果某些数据对计算属性的结果没有影响，则不应该包含在计算属性的依赖列表中，可以使用其他方式（如方法或数据属性）进行处理。

原创 《代码整洁之道》

比如checkPassword可能会有时序性耦合的问题，当我们调用完这个方法之后清空了会话，一些同事在使用的时候可能把它当做一个校验密码的工具方法，所以一些具有时序性的方法，我们需要在方法名中就写清楚。这样不但能保持函数短小，而且，因为块内调用的函数拥有比较具有说明性的，名称，从而增加了文档的价值。同样，e也不是一个便于搜索的号变量名。由此可见，长名称剩余短名称，搜得到的名称胜于用自造编码代写出的名称。判断函数是否布置做了一件事，还有一个方法，就是看是否能再拆出一个函数，该函数不仅是单纯地重新诠释其实现。

原创 vw值的计算

【代码】vw值的计算。

原创 vw单位的作用

*1vw = 1/100视口大小*/

原创 rem的单位换算

*设计图的尺寸px / html的fontsize rem*/pstcss-pxtorem（需要webpack配置）

原创 适配方案-rem+动态html的font-size

动态font-size媒体查询。//拿到html实例。

原创 【无标题】

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：撤销：Ctrl/Command + Z重做：Ctrl/Command + Y加粗：Ctrl/Command + B斜体：Ctrl/Command + I标题：Ctrl/Command + S

原创 Vue学习day03(vscode)

1.JS高阶函数的使用(filter/map/reduce)//函数式编程（第一公民：函数）给出一个数组:const nums = [10,20,111,222,444,30,50];1.需求去除所有小于100的数字2.将所有小于100的数字进行转化：全部*23.将所有new2nums里的数字相加，得到最终结果普通写法://1.需求去除所有小于100的数字let newnums = [];for(let n of nums){ if(n<100){ newnums.pu

原创 Vue学习Day02-案例（购物车案例练习）

要求：点击加号或减号时，下面的总价要跟着改变，点移除操作时，要将记录删除掉，并且当内容为空时，显示文字：购物车为空。以下是自己写的：1.界面搭建<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c

原创 Vue学习day02（vscode）

1.计算属性的setter和getter（为什么这里的fullName不用加括号）因为直接调用了get里的方法所以不加（）也可以显示出最终结果注意：//计算属性一般没有set方法，只读属性可以简写做：2.计算属性和methods的对比（计算属性的缓存）同样执行了五次，但是methods要调用5次而computed只需要一次。原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。当改变了firstName或者lastName的值后，computed会再调用一次，而所有显示出来的

原创 Vue学习day01（vscode）

1.vscode快速新建html文件并快速生成代码——输入!后按Tab键即可2.在vscode怎么运行html文件？首先点击扩展搜索open in browser点击安装，完成之后点击设置扩展设置搜索open-in-browser填入Chrome完成之后关闭vscode重启右键点击Open inDefault Browser即可3.v-for的使用在控制台添加movies的数据4.vscode注释快捷键vscode注释的快捷键：“Ctrl + /”和“Alt+

原创 黑马JavaWeb学习踩的坑-day17案例

在导入了html和bootstrap的各种样式之后，一运行，唉，404了Failed to load resource: the server responded with a status of 404 ()就在想是不是路径写错了，就放了个图片进去css文件里实验了一下，结果可以，路径并没有写错。再尝试了一下发现还是不行，于是我又写了个test.css放进去测验一下，还是没有显示出样式，于是我继续上网查，说是静态资源的问题，于是我就把css设成了静态资源。再次运行打开问题就解决了。...

原创 黑马JavaWeb学习踩的坑——登陆案例 BeanUtils的基本使用

导入了commons-beanutils-1.8.0.jar包重新add as library之后还是报错是因为前面还导入spring的包把这个删掉再import org.apache.commons.beanutils.BeanUtils;就好了。记得抓一下异常

原创 黑马JavaWeb学习踩的坑——登录案例 代码实现1

黑马JavaWeb学习踩的坑——登录案例 代码实现1这是因为mysql-connector-java的版本问题我用的是mysql8.0的数据库，还了个mysql-connector-java8.0.20的就好了改完之后再检查一下username和password有没有写错。完事了附上jar包链接：https://pan.baidu.com/s/1giUgSgrlb3rmdeBz6IYArw提取码：5poz...

原创 CF-刷题纪录

#CF决定开始刷cf，所以开一个记录贴1216/A题意：让a[1-2]…a[1-4]…a[1-6]都满足a的个数等于b的个数只要两个两个对比，如果a[i] == a[i+1],就让a[i]变成相反的就行了。代码：#include<stdio.h>#include<string.h>int main(){ int n ; char str[2000...