qq_45050083的博客

原创 0621熟悉项目

2、首页组件组成：layout组件下的index为入口。左侧菜单栏SidebarNew（大概意思是遍历数组生成菜单），右侧菜单栏app-mai（主体内容）+ main-tags-view（页签）3、router-view：使用this.$router.push进行页面上router-view组件的路由替换。实现同一个页面，不同的地址渲染不同的组件。4、路由渲染：通过后端返回的路由，转成对象，再数据处理，进行权限判断能不能渲染，符合条件的添加到路由中。然后再渲染在路由中。共享给各组件的数据。

原创 前端打包过大如何解决？

前端开发完毕部署到线上是，执行npm run build。当打包过大时，部署到服务端后加载缓慢，如何优化？前端打包成gzip，用new CompressionWebpackPlugin来压缩。服务端nginx设置。我们可以通过执行npm run analyze。可以看到各个包文件大小的区别。当打包过大时，通过压缩gzip的方式，可以看个开始和打包和压缩的大小。

原创 数据可视化中数据量过大如何优化？

【代码】数据可视化中数据量过大如何优化？

原创 dva数据流总结--call（）

【代码】dva数据流总结--call（）

原创 React的合成事件

合成事件：通过事件委托，利用事件传播机制，当事件传播到document时，再进行分发到对应的组件，从而触发对应所绑定的事件，然后事件开始在组件树DOM中走捕获冒泡流程。但是不要原生事件和react都用，如果原生事件使用stopPropagation()，那将无法冒泡到react事件，那个对应的事件将无法被注册。原生事件：利用事件传播机制，从document捕获下来，哪个绑定对应的事件就直接执行了。原生事件 —— > React事件 —— > document事件。都是先执行原生事件再到react事件。

原创 React类组件和函数组件的区别

参数props本身是不可变的，函数组件中的showMessage在3秒延迟后拿到的仍然是原来的props.goods。但是类组件中实例的this是可变的，类组件中的showMessage在3秒延迟后去拿this.props.goods时，由于this发生了变化，所以造成取到的值不是原来的值。类 组 件 ：当用户选择苹果，点击购买后，再切换浏览西瓜，提示信息反馈用户下单的是西瓜！函数组件：当用户选择苹果，点击购买后，再切换浏览香蕉，提示信息反馈用户下单的是苹果。而类组件得到的都是最新的值。

原创 react学习之---jsx转成虚拟dom的过程

jsx----经过Bebal编译返回可供React.createElement()可调用的对象—React.createElement调用后生成虚拟dom—diff算法—生成新的真实dom经过babel编译：import {greet} from ‘./utils’;const App = ReactDOM.render(App, document.getElementById(‘root’));经过babel编译后，被React.createElement调用：var _utils = webpac

原创 日常学习收获之----react的ref和wrappedComponentRef的区别

ref:只能获取组件暴露本身的方法，不能获取自定义的方法。只能访问到子组件暴露的focusInput方法。

原创 输入URL发生了什么

原创 关于前端跨域的结局方案

通过正则匹配，当发送请求时，经过这个地方，匹配到路径，从而将地址替换掉，通过node发送正确的后端api。实际是node.js发起的请求。现在前端脚手架都设置了proxy代理，既然浏览器发起请求产生跨域，那就用node.js发送请求，即可产生跨域。前端浏览器发送请求，经过nginx反向代理，到正确的服务端地址。target: ‘项目服务器地址’, //后端服务器地址。用的是node.js中间件和nginx反向代理服务器。我接触到的react项目。nginx反向代理服务器。

原创 前端代码是如何执行的

原创 学习并深入理解闭包

a执行就是b定义，所以a执行的时候，就有b用a的的变量的作用域,a执行的时候，b看到的和a是一样的。所以垃圾回收机制并不会回收。作用域和执行上下文之间最大的区别是： 执行上下文在运行时确定，随时可能改变；作用域在定义时就确定，并且不会改变。创建变量对象GO，包括变量和函数作用域装在一块内存中。但是没有赋值，变量都是undefined,函数：0xxx。里面有VO对应ao(函数里的变量，没执行，undefined，执行，被赋值）那么闭包是怎么能访问到已经执行完的变量呢？学习闭包前，先学点别的。

原创 菜鸟对原型链的理解

person1的prototype指向构造函数(Person)的原型对象（Person下的一个属性），构造函数(Person)的原型对象里的constructor指向构造函数(Person，一整个)。构造函数里的prototype指向对象（Object）的原型对象，对象（Object）的constructor指向Object，Object的prototype指向null。当我们new一个构造函数是，实例对象（test），实例对象的__proto__指向构造函数的prototype,

原创 react由用index作为key进行增删查改引发的问题

但是，在动态的增删中，列表渲染通常都是相同的类型，触发了列表渲染通常都是相同的类型，所以位置变动时，多半是会触发节点原地复用效果，不会导致树的销毁重建发生。因为添加小王在第一个元素，它的key是0，旧的dom的key=0是小张。用index作为key，对表格进行增删查改，序号会更新排序，也就是新元素的长度多少，就会更新多少次的真实dom。当不带Key的时候，采用的是遍历的方式来对比新旧节点，从而达到更新节点的效果。key的作用主要是为每个节点设置一个唯一的标识，可以更快，更准确的拿到节点。

原创 前端工程化

写一个CSS文件（style.css)，引入 import style from…用的时候就style.xx。目前主流ES6,跟平时项目中import …

原创 前端原型链

前端原型链

原创 由forEach和map函数联想到的浏览器工作原理，闭包

1.forEach和map的相同点：（1）：都是操作数组且只能操作数组。（2）：参数一样（3）：this都是指向window。2.不同点：（1）返回值：forEach没有返回值。map有。注：若数组中是对象，修改值可直接影响原对象。var ary = [{aa:‘oo’}];var res = ary.map(function (item,index,input) {return item.aa = ‘lplp’})console.log(res’);//–> [‘lplp’];

原创 图片的放置位置

原创 2021自己的年终总结

是真的好久好久没写博客，前段时间该死的公司896，那段无光的日子，哪还有时间写博客啊，哈哈哈哈。好吧，说回来，还是自己懒。说起博客，本来自己不怎么写的，主要觉得不怎么重要，后来经历了一些挫败，以为大神给我指点了一些路，和学习的方法，果然大佬就是不一样，一针见血，按照他所说的，感觉自己比以前进步快。我的意思不是说自己变得很厉害，是感觉自己相对以前进步快。仅此而已。 好了，说了那么多废话。回到我想说，年终总结。 在进入2021年之前，我们一家人给自己算过命。其实在今年，我还觉得仙婆说的不对，但其实，全.

原创 2021-07-26---react的渲染原理

哈哈哈哈，好久不写博客了，主要是因为最近太忙，打工人的生活总是卑微的。。。。今天主要分享个人对React的渲染的理解。

原创 由react联想到原生的JS

情景：定义一个变量在函数组件外，当再次点击回来数值没有变成初始值！！！涉及只是点：作用域、垃圾回收。作用域链的本质：将有嵌套层次关系的执行上下文的Vo拼接起来。函数的访问先从自身找，找不到再去Scope...

原创 红宝书---生成器

原创 红宝书操作符总结

红包书操作符总结：

原创 浅谈createContext或者Context

前言：最近的用react的hook做项目要求一个子组件的值要改变父组件的值，去百度了一下，原来使用到了Context。话不多说，直接上图：有图了没必要再写文字，下面主要是写实现方法：1.在父组件中使用1.来引入createContext。该对象会返回一个对象，该对象下有Provider属性。2.引入子组件。value属性是要共享的数据。3.子组件接受context 对象。这样子组件修改的数据父组件的值也会被改变，父组件的值改变子组件也会改变。推荐文章：https://blog.c

原创 总结hook-间组件的传值

1.最近用函数组件来写react，所以总结下它们之间的关系，注意，我写的仅仅是针对自己的项目，若误导了，请见谅！若想获得子组件或者兄弟之间的值。1.首先在父组件引入useRef，通过useRef和子组件的ref进行连接----->指向dom节点，类似this,是一个容器。useRef返回一个***可变的ref对象***，绑定在组件的ref属性中。2.在子组件中，把ref对象赋值给ref属性。3.在子组件的代码中，用forwardRef来创建组件。目的是该函数有两个变量，其中第二个变量r

原创 说说对jsx的理解

JSX:可理解成html，经过Bable就是运行在浏览器上的代码了。在原生中，js创建dom用var a = document.createElement(‘p’);a.setAtribute(‘class’,‘myp’);a.appendChild(document.createTextNode(‘pp’));pp而在react中，var a = React.createElement(‘a’,{class:‘link’},‘pp’)第一个参数：为元素节点二

原创 react之hook

快下班了，嘻嘻嘻，蹭着快下班才写博客，我好不专业。。。。。。。。。。。。1.hook:用函数的形式来完成所有组件逻辑。且可注入类型class的state和生命周期。2.hook以use开头。useEffect():相当与mount、update、unmount周期函数。执行钩子函数的操作。写法：useEffect(() => {},[])正常情况下传递两个参数。（1）如果运行一次，[]为空的数组，一般初始化的时候。=mount（2）若[xx]里有值，则代表update。当数组里的值发

原创 理解单页面应用和react-route的关系

1.单页面应用：实际是把整个项目的所有内容分成很多组件。优点：前后端分离开发，后端只负责给数据。减轻服务器压力。良好的交互体验。2.多页面：概念和单页面应用相反。缺点：每次进入新的页面，都需要向服务器发送请求，要整个页面的所有代码，且每次刷新，都会再次请求。浪费流量、有延迟、友好性差、体验差。3.所以，现在都用单页面应用，做法是一次性把所有页面请求过来，而后来不会重新加载页面，取而代之的是利用js的变化HTML内容（除非是数据是动态的），例如：动态显示或隐藏。模式组成(结合项目来说）：com

原创 umi-request网络请求之路

1.umi-request是基于fetch封装的请求库。抛弃了设计粗糙、不符合分离的XMLHttpRequest，更加语义化。2.fetch：用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。fetch(‘http://example.com/movies.json’).then(function(response) {return response.json(); //返回响应的结果的promise。})

原创 2020年最后一个月的第一天，谈谈http和https的那些事

2020年就要过去了，放心今天并不是做啥年度总结，就想蹭个开头，好了，转回正题，谈谈http和https的那些事！**http:**在日常项目中，我们用的都是http请求。**https：**基于tttp,安全链接。https = http + SSL。不同点：1.HTTP以http开头，HTTPS以https开头。2.HTTP不安全，HTTPS安全。3.HTTP标准端口号80，HTTPS标准端口号443.4.HTTP不需加密，HTTPS需要加密。5.HTTP不需要证书，HTTPS需要证书。

原创 11.18--期约

1.promise：（1）是异步编程的一种解决方案。里面保存着异步操作。（2）是个有状态的对象，{pending:待定；fullfilled(resolve)：兑现，解决。reject:拒绝。而控制期约状态的转换是通过调用它的两个函数参数实现的，通常命名为resolve()和reject(); } **注：三种状态不可逆；在promise里，私有的；不能被外部代码修改。**2.用途：{（1）抽象的表示一个异步操作，（判断http状态码处于那种状态）；（2）期约封装的异步操作会

原创 11.17---函数声明、表达式、函数内部、属性与方法

1.函数生成 {函数声明：JS引擎在代码执行之前，先读取函数声明，并在执行上下文中生成函数定义，因此存在函数声明提升。函数表达式：必须等到代码执行到它那一行，才会在执行上下文中生成函数定义。所以函数表达式不会。}两者区别：什么时候真正有定义的区别。2.函数内部：存在arguments和this、new target属性。{arguments: {产生：只有function关键字定义函数。callee属性：指向arguments对象所在函数的指针，（阶乘函数）：使用arguments.

原创 11.17----扩展运算符

1.最有用的场景：函数定义中的参数列表–>既可以用于调用函数时传参，也可以定义用于定义函数参数。一句话：参数是一个数组，实际是分别传入数组的参数。作用一。实现该方式的还有方法名.apply(null,参数名）；对于arguments对象而言，并不知扩展运算符的存在。而是按照调用函数时传入的参数接受每一个值。适用扩展运算符的对象：{ 1.arguments。 2.普通函数。 3.箭头函数。不支持arguments对象。2.作用二：收集参数。把不同长度的独立参

原创 11.16---遍历数组赋值给对象失败，const定义常量不能重新再赋值，render的参数

1.遍历数组赋值给对象失败，取到的都是最后一项的值：let result = [];item = {};list.forEach(function(value){item.a = value.a;item.b = value.b;result.pust(item);}结果得到的总是最后一组对象的值。原因：因为item是指向对象的指针。每次push到result之后，保存的都是这个引用，循环遍历完数组后，每个item指向的都是同一个对象。解决办法：把值push进数组，而不是指针。resu

原创 2020-11.13--告警策略编辑页面的总结，重点是可编辑表格。

1.[a,b]：返回的值是把b追加到a后面去，返回一个新的数组。2.在箭头函数中使用的forEach结果this返回undefined。原因是forEach里的回调函数，只要有function,就会有this，当没有哪个对象调用是就会返回undefined。解决方法：const that = this。在forEach函数用that访问。3.实现可编辑表格：有两种方式，主要第二种：（1）两个Table。（2）用Form + Table。两个原理一样。个人认为Form更好理解。实现这个功能的思路：

原创 11.10----函数之箭头函数和函数名

1.函数定义：（1）以函数声明的方式定义。function sum (num1, num2) {return num1 + num2;}（2）函数表达式。let sum = function(num1, num2) {return num1 + num2;};（3）箭头函数，行为和函数表达式一样，任何可以使用函数表达式的地方，都可以使用箭头函数。let sum = (num1,num2) => {return num1 + num2;}(4)使用Function构造函数。不推

原创 11.09--代理的方法

原创 11.9----代理-----代理基础

1.代理：调用new创建一个目标(target)对象一直的虚拟化对象；该代理会拦截底层代码的操作，从而修改内置行为；这些底层操作被拦截后会触发处理程序对象的方法。注：目标和处理程序对象的方法必须一致才会触发；目标和代理之间存在一个相互引用。2.作用：提供了修改底层实现的方式，可在代理对象上进行一些操作，为我们访问对象制定一些规则，就像代理服务器可以过滤某些服务器的访问等功能。3.结构：new Proxy(目标对象，是一个对象，是一个对象它为obj对象制定了一些规章制度）4.特点：（1）目标和代

原创 11.5--总结es6的类class

1.正式面向对象编程，但背后仍然是原型和构造函数的概念。2.类的定义：（1）类声明class Person{}（2）类表达式const a = class Person{}注：与函数表达式的相同点：类在被求值之前也不能引用。不同点：函数声明可以提升，但类不能；函数受函数作用域限制，而类受块作用域限制。3.类的构成类可以包含构造函数方法、实例方法、获取函数、设置函数和静态类方法。默认情况下，类在严格模式下执行。（1）首字母要大写。（2）类表达式的名称是可选的，在把类表达式赋值给变量后

原创 11.05---理解代码的高内聚、低耦合

1.相对代码而言：在软件结构设计、都会要求‘高内聚、低耦合’来保证代码的质量。内聚是代码块间的独立性，耦合是各个代码块间的联系。（1）每个模块之间相互联系的紧密程度，模块之间联系越紧密，模块的独立性就越差，反之同理。（2）一个模块的各个元素之间的联系的紧密程度，各个元素（语句）之间的联系程度越高，则内聚性越高，即高内聚。（3）如果一个项目中有20个方法调用良好，但是要修改了其中一个，另外的19个都要修改，这就是高耦合。独立性太差。总结：不同模块之间联系越少越好。—低耦合同一模块之间联系越多好。—高