JJWanna-CSDN博客

原创 react hooks 指南

1.以下对react hooks 描述？react要解决的问题是状态共享，状态指的是状态逻辑和数据处理逻辑使用hooks更容易将组件的ui与状态分离多个状态不会产生嵌套，写法是平铺的写法上有限制，不能出现在条件、循环中useEffect第二个参数不写，任何方法都触发useEffectuseEffect第二个参数是一个数组，表示以什么state和props来执行副作用useEffect中定义的副作用函数的执行不会阻塞浏览器更新视图，也就是说这些函数是异步执行的。而co

2021-01-02 20:45:58 238

原创 react项目性能优化方向

react项目性能优化1.react 性能react hooks 使用源码为什么？react 面试、react 渲染逻辑、虚拟dom 、memo、Lazy、 setStatefiber 浏览器渲染一帧画面的过程？屏幕上一个像素点是怎么展示出来的？整个渲染过程？react按需加载：按需加载是依靠延迟计算思想来优化应用响应性能。react16之后实现懒加载可以使用react.lazy方法，之前是使用react-loadable等一些库react.lazy本质

2021-01-02 17:08:14 411

原创算法-字符串出现的不重复最长长度

字符串出现的不重复最长长度var lengthOfLongestSubstring=function(s){ const arr=[...s] let res=1; let result=arr.reduce((total,cur,i,arr)=>{ if(i==0){ return cur; }else{ if(total.indexOf(cur)<0){ return total+cur }else if(re

2020-12-15 09:29:52 362

原创算法-多种方式实现斐波那契数列

function dabonacci(n){ let num1=1, num2=1, sum; let arr=[1,1]; for(let i=3;i<=n;i++){ sum=num1+num2; num1=num2; num2=sum; arr.push(sum); } return arr;}// 基于es6 Generator实现function * fabonacciG(num){ var a=1,

2020-12-15 09:13:46 152

原创算法-求每一份和尽量相等

有一堆整数，请把他们分成三份，确保每一份和尽量相等（11，42，23，4，5，6，4，5，6，11，23，42，56，78，90）思路：1、求出总和为406 ，根据需要分成的分数（三份）求出每份的平均数为 135.332、用平均数（135.34）减去本数组中最大的数（90）等于45.34，然后将45.34 找出当前数组中接近该数字为42，第一份数字可以确定 135.34 -（90 + 42）= 3.34 ，这个3.34 在本数组内属于最小的数字，所以不能被其他数组代替，确定第一组数字时候，将90

2020-12-15 09:10:35 1190 1

原创 jdos配置负载均衡和域名匹配

新的项目jdos部署，现配置两台机器，新建两个线上分组。一个应用可能有多个分组，一个分组就是一个集群（集群一般指2台或以上的实例组成共享服务）部署项目，上线集群，容器实例分配机器Ip新建负载均衡为啥要配置负载均衡？可以实现通过一个统一的内网域名来访问应用。负载均衡与分组是一一对应关系，即一个负载均衡仅对应一个分组。正常情况：使用跨集群负载均衡（支持汇天一区到五区）因为我这里选的汇天七区不在跨集群范围内，所以不能选择跨集群。对应分组选择上面新建的分组一一对应。新..

2020-12-14 16:36:56 1081

原创完善函数，实现图片的加载

完善函数，实现图片的加载function createImg(url){ createImg(url).then((value)=>{ document.body.appendChild(value); })};实现方式一：function createImg(url){ return new Promise((resolve,reject)=>{ if(url){ let imgEle=document.createElement("img");

2020-12-09 22:00:52 272

原创 var arr=[[‘A‘,‘B‘],[‘a‘,‘b‘],[1,2]] 求二维数组的全排列组合结果

var arr=[['A','B'],['a','b'],[1,2]]求二维数组的全排列组合结果：Aa1,Aa2,Ab1,Ab2,Ba1,Ba2,Bb1,Bb2function foo(arr){ //用于记录初始数组长度，用于将数组前两组已经获取到全排列的数组进行截取标识 var len=arr.length; //当递归操作后，数组长度为1时，直接返回arr[0],只有大于1继续处理 if(len>=2){ //每次只做传入数组的前面两个数组进行全排列组合，即arr

2020-12-09 16:01:01 511 1

原创面试题

谈谈你对 dns-prefetch 的理解DNS 是什么-- Domain Name System，域名系统，作为域名和IP地址相互映射的一个分布式数据库。DNS Prefetching浏览器根据自定义的规则，提前去解析后面可能用到的域名，来加速网站的访问速度。简单来讲就是提前解析域名，以免延迟。<link rel="dns-prefetch" href="//wq.test.com">这个功能有个默认加载条件，所有的a标签的href都会自动去启用DNS Prefetching，也就

2020-12-08 15:02:42 123

原创 react-router里的Link标签和 a 标签有什么区别？

react-router里的Link标签和 a 标签有什么区别？？从最终渲染的Dom来看，两者都是链接，都是标签，区别是：是react-router里实现路由跳转的链接，一般配合使用，react-router 接管了其默认的链接跳转行为，区别去传统的页面跳转，的”跳转”行为只会触发相匹配的对应的页面内容更新，而不会刷新整个页面。做了三件事情：1.有onclick那就执行onclick2.click的时候阻止a标签默认事件3.根据跳转href(即是to )，用history（web前端路由两种

2020-12-01 17:03:25 2093

原创 react面试题

react setState是同步还是异步？react setState默认是异步，但有时候是同步setState为什么默认是异步？假如所有setState是同步的，意味着每执行一次setState时，（有可能一个同步代码中，多次setState），都重新vnode diff + dom 修改，这对性能来说是极为不好的。如果是异步，则可以把一个同步代码中的多个setState合并成一次组件更新。setState什么时候是同步？在setTimeout或者原生事件中，setState是同步的。Rea

2020-12-01 11:33:12 118

原创如何提高系统的稳定性？

如何提高系统的稳定性？2人以上的需求或项目，必须制定主要负责人，负责整体系统的设计、代码把控，内外部的协调，把整体流程串起来，不只是每个人只做自己的部分；在需求评审之前，相关人把prd通读，把问题提前记录，前置与产品沟通，切记不要prd还没看就评审，导致评审过程中发现不了问题，到了研发阶段或者上线了才意识到大问题；需求拆解，避免项目或需求过于庞大，尽量以一周开发完成，两周上线的节奏进行；技术方案设计之前先跟主负责人、组长沟通大致思路，方案出来之后先内部（找主负责人或组长）过一遍，确保没有大问题再去

2020-11-19 21:25:18 4227 1

原创学习面试问题汇总

二叉搜索树特点二叉搜索树（Binary Search Tree）,它或者是一棵空树，或者是具有下列性质的二叉树；若它的左子树不空，则左子树上的所有结点的值均小于它的根节点的值；若她的右子树不空，则右子树上所有结点的值均大雨它的根节点的值；它的左、右子树也分别为二叉排序树。二叉搜索树作为一种经典的数据结构，它既有链表的快速插入与删除操作的特点，又有数组快速查找的优势；所以应用十分广泛，例如在文件系统和数据库系统一半会采用这种数据结构进行高效率的排序与检索操作。冒泡排序如何优化？传统冒泡排序中每一趟排序操

2020-11-19 21:17:00 157

原创电脑sudo 权限问题解决

电脑sudo 权限问题解决，一顿猛操作最后不知道因为啥好的sudo chmod -R 777 /usrnpm install -g nvmnpm install -g nrmnrm lsnvmnvm lssource ~/.bash_profilenvm lsnpm install @jd/jnpm -g --registry=http://registry.m.jd.comjnpmnrm lsnrm add jdnpm2 http://registry.m.jd.comnrm l

2020-10-20 19:16:02 357

原创性能优化 Google AMP

我对性能的一些体会google amp和它的理念Google AMP当我门谈到性能的时候，谈论的是什么？卡顿、资源的消耗、流畅、快性能的理解 —— 速度加载速度越快，渲染速度越快，IO 文件， http速度自行车—汽车 —火车–飞机抛开场景谈性能都是耍流氓！谈论性能之前都会考虑一些其他的因素？目标：想要干什么？提升用户体验提升执行效率减轻服务器压力花钱花时间限制安全性（常见的优化方式，把图片从css ， j s静态资源放到cdn上，把我们的文件丢给.

2020-10-19 15:22:23 229

原创全局格式化-时间戳转日期

时间戳转日期返回格式yyyy-MM-dd hh:mm:ssexport const formatDate = timestamp => { let _date = new Date(timestamp); if (isNaN(_date.getTime())) { return ''; } let year = _date.getFullYear(); let month = _date.getMonth() + 1; let date = _date.getD.

2020-10-13 15:15:26 175

原创格式化价格

格式化价格price 价格，单位：分replacement 非数字时显示的托底内容prefix 符号decimalNums 保留小数位数rounding 是否四舍五入export function formatPrice({ price = '', replacement = '--', prefix = '¥', decimalNums = 2, rounding = true,}) { let ret = 0; const priceFloat = pars.

2020-10-13 15:08:51 294 1

原创获取地址栏携带的参数

export function getUrlParam(name) { const thisReg = new RegExp(`(^|&)${ name }=([^&]*)(&|$)`, 'i'); const r = window.location.search.substr(1).match(thisReg); if (r != null) { return decodeURIComponent(r[2]); } return null;};

2020-10-13 15:02:17 210

原创 for in 和 Object.keys区别

for-in是js中最常见的迭代语句，常常用来枚举对象的属性。某些情况下，可能按照随机顺序便利数组元素。Object构造器有一个实例属性keys，则可以返回以对象的属性为元素的数组。数组中属性名的顺序跟使用for-in遍历返回的顺序是一样的。for-in 循环会枚举对象原型链上的可枚举属性，而Object.keys不会for in遍历对象及其原型链上的可枚举的属性如果用于遍历数组，除了遍历其元素外，还会遍历开发者对数组对象自定义的可枚举属性及其原型链上的可枚举属性遍历对象返回属..

2020-10-10 10:10:50 3786

原创 react 订阅页面顺序问题

场景A页面跳转 B页面A页面跳转C页面B页面与C页面互跳进入页面订阅方法Q，离开页面要销毁方法QB 页面的model.jssubscriptions: { setup({ dispatch, history }) { console.log("B") return history.listen(({ pathname, query }) => { if (pathname === '/product/B') { disp

2020-10-09 22:00:52 151

原创 css超过两行显示省略号，项目中有不生效的是被编译的问题导致

Css超过两行现实省略号 width:250px; height:44px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; // 作为弹性伸缩盒子模型显示。 /* autoprefixer: off */ // 这行必须加的，这个就是控制代码被编译不生效的问题的上off 下on -webkit-box-orient: vertical;

2020-09-11 10:17:04 820

原创 Google AMP 知识分享

AMP 是什么AMP，全称是 Accelerated Mobile Pages，是 Google 推出的开源前端框架。AMP 最明显的特征就是性能，被称为目前 WEB 届最快的框架毫不夸张。 Google 对 AMP 的性能进行了极致的优化，比如 JS 和网页数据放在缓存（具体可看这篇文章：AMP 如何提升性能）。是否有必要做 AMP当然有必要做了。理由有 2 个：首先，是快！从内部一个 case 来看，AMP 页面在 Load Time 上比 PC 页面快 1 倍，在交互时间上快 2 倍.

2020-09-07 09:44:26 795

原创 webpack打包时hash码是怎么生成的，随机值一样时怎么避免

webpack生态中存在多种计算hash的方式：hashchunkhashcontenthashhash代表每次webpck编译中生成的hash值，所有使用这种方式的文件hash都相同。每次构建都会使用webpack计算新的hash。chunkhash基于入口文件entry及其关联的chunk生成，某个文件的改动只会影响与它有关联的chunk的hash值，不会影响其他文件conenthash根据文件内容创建，当文件内容发生变化时，contenthash发生变化。避免相同随机值web

2020-09-05 09:13:44 2237

原创 2020-08-20

1、Ant Design Pro 初了解说到ant design pro，得先了解一下ant design是个什么东西？ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架。而ant design pro呢?就是基于Ant Design这个框架搭建的中后台管理控制台的脚手架。ant design pro官方文档：https://pro.ant.design/docs/getting-started-cn2、安装默认你本地已安装好node和git环境$ git clone

2020-08-20 08:03:25 114

原创 umi 与dva结合解析

Umi.js封装了编译步骤，包括了很多开发时的有用工具。只要你写好 React 代码，接下来 umi 就会把它处理为生产代码。配置文件被约定为config/config.js。也可以使用 .umirc.js 来作为配置文件。它和 config/config.js是二选一的。 src 目录，它用来存放项目的除了配置以及单测以外的主要代码。约定的存放页面代码的文件夹是 pages。在配置项中添加 singular 为 true 可以让 page 变为约定的文件夹。在 umi 中，你可以使用约定式的路由

2020-08-19 20:07:27 5006

JJWanna的博客