- 博客(23)
- 收藏
- 关注
RSS订阅原创 react hooks源码深入浅出（二）
在第一篇文章里我们了解了初次渲染过程react内部的执行机制，接下里我们看看在状态更新阶段react又是怎么处理的此时我们触发第一篇文章demo中onclick事件，也就是触发了setCount方法同样从两个基础hook出发useStateuseEffect核心流程useState在开始之前我们带着两个问题：执行setCount后，内部发生了什么？如果我们多次执行setCount，它是怎么样取到最新的值的？首先解答第一个问题我们在第一篇文章说到了，在mountState阶段.
2021-01-04 00:02:10
722
原创 react hooks源码深入浅出（一）
react hooks在react 16.8版本推出后就广受好评，因为它很好的解决了旧版本react无法很好的在状态逻辑上复用的问题，同时官方说明hooks会向后兼容不存在breaking changes，在项目中更好的无缝接入。背景和意义目前项目中hooks使用越来越普及，我们作为开发者不仅要知其然还要知其所以然让我们在使用过程中能更快的定位排查问题、性能调优学习和了解优秀框架的实现思路解析纬度初次渲染更新阶段DEMO本次以最基本的一个demo开始讲解一、初次渲染核心流程.
2020-12-09 21:43:02
721
原创 深度解析dom diff算法（三）
react diff算法实现我们了解了，我们继续对比学习以下vue的算法流程是怎样的VUE算法时间复杂度同样是将时间复杂度降低到了O（n）Vue对diff算法的改进1、和react的策略如出一辙，同样的三条策略2、唯一不同点在于element diff的纬度上vue有了自己的想法Vue对element diff做的优化在vue内部遍历新旧树同一层级节点时，对于旧树和新树分别有一个头尾指针（共四个指针，分别是oldStart，oldEnd，newStart，newEnd），利用这.
2020-10-27 21:49:04
472
原创 深度解析dom diff算法（二）
了解了vdom和dom diff的前世今生，让我们来看看当今主流前端框架的diff算法策略又是什么，本篇我们先介绍react的dom diff算法React算法时间复杂度众所周知，react框架把diff算法复杂度由O（n的三次）降低到了O（n）React对diff算法的改进react的diff算法针对三个纬度产出了相应的优化策略：1、web ui中跨层级的移动操作很少，可以忽略不计 （tree diff）2、拥有相同类型的两个组件将会生成相似的树形结构，不同类型的组件生成不同的树形结.
2020-10-26 22:35:59
647
1
原创 深度解析dom diff算法（一）
最近公司内部正好要准备技术分享，所以花了大概三个月的时间去学习关于domdiff算法的知识，文章会结合源码和图片尽量的深入浅出，把整个过程说的明白、讲的清晰。文章分三篇：一、认识virtual dom && diff算法演进史二、react的dom diff策略三、vue的dom diff策略什么是virtual dom？简单一句话，就是用javascript模拟出来的dom对象为什么要有virtual dom？可以成功获取时间戳，ios无法获取处理方法: 将字符串中-替换成/，.replace(/\-/g,'');2、点击复制功能安卓和ios是不同的实现方式，详见我之前的一篇博客https://blog.youkuaiyun.com/weixin_39327883/art...
2019-07-30 15:09:16
1978
原创 js 利用栈来实现括号匹配算法
const str = '({}))'; const isbalance = (str) => { const [first,...others] = str; //解构赋值 es6新增方法（不熟悉的http://es6.ruanyifeng.com/#docs/array戳这里） const st...
2019-07-10 16:01:52
1478
1
转载 前端跨域问题九种解决方法
1、jsonP2、iframe系列iframe+domainiframe+hashiframe+window.name3、postmessage4、跨域资源共享（cors）5、nginx代理6、node.js中间件代理跨域7、websocket协议跨域详情参考链接：https://www.cnblogs.com/sdcs/p/8484905.html...
2019-06-30 16:16:48
266
原创 ajax请求详解
ajax的基础是XMLHttpRequest1、需要新建对象let xhr = new XMLHttpRequest();2、向服务器发送请求xhr.open(method,url,async); //method定义请求post还是get方法 url定义请求路径async定义是否异步xhr.send(string); // string仅用于post请求注意：这两...
2019-06-23 23:46:24
352
原创 简述XSS和CSRF的概念和区别
XSS全称Cross Site Scripting，名为跨站脚本攻击，黑客将恶意脚本代码植入到页面中从而实现盗取用户信息等操作。常见的攻击情景： 1、用户A访问安全网站B，然后用户C发现B网站存在XSS漏洞，此时用户C向A发送了一封邮件，里面有包含恶意脚本的URL地址（此URL地址还是网站B的地址，只是路径上有恶意脚本），当用户点击访问时，因为网站B中cookie含有用户的...
2019-04-25 14:52:22
16722
1
原创 h5 复制功能实现(兼容IOS和android)
安卓实现方法：document.getElementById('#input').select(); //选择所要复制的文本节点document.exexCommand('copy'); //执行浏览器的copy命令实现复制 IOS实现方法：1、window.getSelection().removeAllRanges(); //将页面所有的文本区域都从选区中...
2019-04-11 12:16:41
4195
原创 mysql与mongodb数据库的区别
mysql1、为关系型数据库，在不同的引擎上有不同的存储方式2、查询语句使用传统sql语句，有较为成熟的体系3、强大的社区以及开发文档mongodb1、为非关系型数据库（文档型数据库）2、使用自己独特的查询语句查询3、存储方式是虚拟内存+持久化4、属于新兴的nosql类型数据库，所以相对于mysql不够成熟mongodb数据库的优势：1、存储的数据为j...
2019-03-13 15:00:37
526
原创 axios与ajax请求的区别
一、axiosaxios({ url:'/user/xxx', method:'POST', responseType:'json', data:{ a:a, b:b } }).then( res => {}).catch( error =...
2019-02-26 00:20:37
3416
原创 es6 规范新增方法小结
1、变量声明新增let、const声明方式： let声明不存在变量提升、且不可重复声明 const 声明一个常量，期间不可改变其值2、箭头函数eg: 之前的方式： function (){ xxx } 现在的方式：var name1 = () => { xxx } 要注意两点: 1、如果参数是一个，则括号可省略；2、如...
2019-02-22 20:52:10
273
原创 ios input失去焦点后页面无法弹回
这个问题只出现在ios手机上，安卓暂时没有遇到如图灰色部分，被顶起无法收回 处理方法：input失去焦点时：window.scroll(0,0); //强制让页面回滚到顶端window.scroll(0,document.body.clientHeight); //强制让页面回滚到底部...
2019-02-22 17:38:42
978
原创 微信小程序嵌入h5项目问题总结（二）
开发前首先要想清楚，你是要用微信小程序自带的授权登录，还是用h5项目的登录。因为选择不一样， 之后的逻辑也会不一样。1、如果你选择微信小程序的快速登录，那么要在小程序中写好授权页面，成功登录后跳转至h5页面，在跳转h5页面时一定要将tokenId传输，并保存到h5缓存（我的项目中所选择的方式）。首先跳转至out文件夹，之后在跳转至h5项目，拼接token 2、如果用H5的注册登...
2019-01-11 15:52:42
9383
10
原创 img标签显示 base64格式的 图片
话不多说，直接上代码其中格式可以为 data:image/png,data:image/gif 有兴趣的朋友可以自己再去研究
2018-12-27 16:35:34
2847
原创 微信小程序嵌入h5项目问题总结（一）
最近公司又筹备了一个新的项目，产品要求在微信小程序中嵌入h5页面并进行交互。我的第一反应WTF？，你们产品能不能尊重下技术、了解下前端开发再胡乱提需求，小程序本身就是为了解决h5用户体验不流畅以及兼容性不强的问题才出现的，你现在让我用小程序重新嵌回体验那么差甚至自己都不想用的h5页面，心中一万个草拟马奔腾而过，更何况这两者交互才是最难得重头戏。吐槽完了，但产品终归是产品，还是人家说了算，接...
2018-12-27 16:19:56
13673
9
原创 vue动态加载组件
本篇只对使用vue框架经验不足的开发者来参考和学习，各位技术大佬不喜勿喷，如有错误还望指正。 最近公司产品经理提出一个需求，要求公司项目首页当中的每个模块要根据后台返回数据中的序号排序然后显示 随后就查阅资料发现了vue中的component is方法，原来我们的尤雨溪大大早已经考虑到这样的问题，才得以及时的挽救了我。 话不多说直接上代码：...
2018-11-14 15:51:16
3786
原创 VUE框架之页面样式混乱问题
这是自己在开发过程中遇到的小坑，都知道每个vue文件中有对应的css样式，但是vue框架中每个vue页面的style必须加上scoped属性，如下图所示，代表仅对当前页面生效，否则在运行项目时页面样式会出现杂乱...
2018-07-19 14:29:41
10779
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人