- 博客(33)
- 收藏
- 关注
RSS订阅原创 一文让你不再困惑setState之原理剖析和代码实现（下）
文章目录setState 原理剖析UpdaterforeUpdateupdateQueue总结我们在面试的过程中经常会被问到，我们通过 setState 更改状态后发生了什么？状态是如何变更的？本期将从以下几个方面来深入了解 setState的工作原理。原理剖析实现异步队列 updateQueue、Updater、ComponentsetState 原理剖析我们通过 class Cmp extends Component 来定义一个class 组件，在源码中，Component的实现很简单，除
2022-03-21 13:58:37
1374
原创 一文让你不再困惑setState之getState（上）
文章目录setState 的特点getState() 获取最新状态值在面试中我们通常会被问到有关 setState 相关的问题。接下来我们先看几个示例，然后通过 模拟实现 setState的行为来更加深刻的理解实例得出的结论。setState 的特点批量执行：多key一次执行，对同一个key多次操作会合并，会执行最后一次可能是异步的（如在生命周期、react事件中）在定时器和原生事件中，它是同步的；由于 setState 可能是异步的，如果要立即获取到最新的值，有三种方式：传函数给se
2022-03-21 00:31:24
2410
2
原创 React 之 简易实现 Fiber架构
文章目录fiber架构是什么？它解决了什么问题？fiber 的核心思想，实现 fiber 我们需要做到什么？如何做？Fiber reconcileCommit 阶段实现useState管理状态更新此篇文章是在学习一步一步实现fiber架构的同时，从另外一个由总到分的角度来总结fiber架构的实现思路。文章末尾有一些学习参考文章可以借鉴。fiber架构是什么？它解决了什么问题？当我们项目过于复杂，渲染树过于庞大的时候，那么我们的递归渲染会耗时很长，而且很难被中断，fiber 的主要原理就是让我们在 di
2022-03-20 22:00:19
1499
原创 通过实现 createElement、Component 和 render 深入理解React 原理
文章目录createElementrender(vdom, container)Component文章主要是通过官网和源码学习之后，对 React 核心 API 加入了自己的理解和总结。完整代码请参考 ,注意代码中将react 版本锁定在17.0.0 之前。createElement简单粗暴，我们先来看下面这段代码：import React from 'react'import ReactDOM from 'react-dom'function HelloMessage(props) {
2022-03-19 00:19:40
707
原创 面试之笔试（特定场景题）
1. 用js实现随机选取10-100之间的10个数字，存入一个数组，去重后求和（保证这10个数字不能出现重复）要求：去重不能使用Setfunction sumOfRandomDistinctTenNumbers(){ // todo let arr = [] let temp = {} let sum = 0 function random(low, ...
2020-04-22 22:57:47
670
原创 面试之笔试篇（实现功能）
1. 防抖和节流// 节流function throttle(fn, wait) { // 隔一段时间执行一次 let lastTime = 0 return function (args) { let now = +new Date() // 跟上次执行的间隔时间大于wait if (now - lastTime >...
2020-04-22 22:43:43
220
原创 面试之笔试篇（JS内置原型方法）
1. 实现一个new先看一个真实的newvar Dog = function (name){ this.name = name}Dog.prototype.getName = function(){ return this.name}var dog = new Dog('miao')console.log(dog.getName()) // 'miao'实现...
2020-04-22 22:26:51
201
原创 手写 React-Router（Hook版）
文章目录Hook 实现router组件思想手写 BrowserRouter手写 Link手写 Route参考文档：react-routergit react-routerHook 实现router组件思想根据运行环境安装react-router-dom，它依赖react-router，安装会自动安装react-router。react-router 中奉行一切皆组件的思想。路...
2020-03-20 18:18:59
581
原创 手写React-Redux（Hook实现）
文章目录React-Redux API实现手写 Provider手写 connect ( Hook实现 )mapDispatchToProps 的两种传参处理React-Redux API实现react-redux提供了两个apiProviderconnectProvide主要是将store分发传递下去，而我们在组件中需要去消费store时，可以使用connect将状态和派发函数映射...
2020-03-18 17:54:55
579
原创 手写Redux
文章目录Redux核心API的实现手写 createStore手写 applyMiddleware手写 thunk 实现下一篇手写React-ReduxRedux核心API的实现主要实现下 redux中核心APIcreateStoreapplyMiddleware以及异步中间件thunk手写 createStore环境搭建store 中将 import 的 redux 改...
2020-03-18 02:41:22
145
原创 Redux & React-Redux必知必会
文章目录Redux 使用为什么要在React中使用Redux？Redux工作原理Reducer是啥？Redux基本使用总结React-Redux使用安装react-redux基本使用下一篇：手写 Redux & React-Reduxreduxreact-reduxRedux 使用为什么要在React中使用Redux？我们知道，react的核心是组件，而组件中有两个重要的属性...
2020-03-17 23:25:09
141
原创 Hook必知必会
文章目录目录Hook解决了什么？Hook的基本使用useState 和 useEffectHook的使用规则自定义Hook目录Hook解决了什么？React没有提供将可复用性行为“附加”到组件的途径。（例如，把组件连接到 store）问题：组件之间复用状态逻辑很难在hook出现之前，组件复用一般采用Render Props 和 高阶组件HOC，这类方案需要重新组织你的组件结构，让代码...
2020-03-16 11:16:04
792
原创 一文搞懂React的ref
文章目录目录refs转发ref使用中的问题方案一：React.forwardRef实现自动转发方案二：回调Refs方案三：useImperativeHandle创建ref目录refs转发Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧，Ref 转发使组件可以像暴露自己的 ref 一样暴露子组件的 ref。下面是几个适合使用 refs 的情况：管理焦点，文本选择或媒体播...
2020-03-15 12:39:35
264
原创 CSS布局之flex
flex的兼容性iOS7.0 开始支持最新Android4.4 开始兼容IE10+ 兼容flex如何实现布局个人总结：flex布局涉及到12个css属性，主要涉及到容器和轴的概念，父容器和子容器，主轴以及交叉轴典型应用(水平垂直居中)： .parent{ display: flex; justify-content: center; ...
2020-03-07 23:47:17
154
原创 内存泄漏和垃圾回收
目录垃圾回收机制常见的内存泄漏垃圾回收机制所谓的内存泄漏简单来说是不再用到的内存，没有及时释放。为了更好避免内存泄漏，我们需要搞清楚Javascript垃圾回收机制。垃圾回收有两种方法：标记清除、引用计数。目前用的比较多得是标记清除，引用计数会存在循环引用的问题。如：var a = {}var b = {}a.n = bb.f = a当变量进入环境（例如，在函数中声明一...
2020-03-03 21:22:10
367
原创 Promise 之深度剖析和实现（上）
需要实现的功能：实现Promise的构造函数 new Promise()实现类成员方法 then()、catch()实现类的静态方法 Promise.all()、Promise.race、Promise.deffer()实现链式调用 resolvePromise()promise的实现机制：通过传一个回调函数去实例化一个promise，里面的回调函数会立即执行new Prom...
2020-03-03 21:19:41
402
原创 Web防御之密码安全
目录密码安全密码泄露渠道存储和传输安全防御手段密码学对称加密不对称加密哈希如何提高密码的安全性前端加密后端加密加盐 | 随机加盐哈希没有密码密码安全密码安全一般有密码的存储和传输类安全。泄露渠道数据库被盗服务器被入侵通讯被窃听内部人员泄露其他网站（撞库）存储防御严禁明文存储单向变换增加变换复杂度增加密码复杂度加盐（防拆解...
2020-02-26 15:41:42
953
原创 Web防御之HTTPS
目录HTTPS和HTTP的区别HTTPS通信原理HTTPS和HTTP的区别HTTPS是在HTTP上建立SSL加密层，并对传输数据进行加密，是HTTP协议的安全版。HTTPS主要作用是：对数据进行加密，并建立一个信息安全通道，来保证传输过程中的数据安全对网站服务器进行真实身份认证HTTP 和 HTTPS的区别：HTTP 是明文传输，HTTPS 通过 SSL\TLS 进行了加密...
2020-02-26 15:39:04
308
原创 常见的web攻击及防御手段
目录XSS（Cross Site Scripting）攻击攻击方式反射型 - URL参数注入存储型 - 存储DB后读取注入攻击危害防御手段转义CSP （Content Security Policy）cookie HttpOnlyCSRF攻击攻击原理攻击危害防御手段禁止第三方网站携带cookieReferer Check验证码点击劫...
2020-02-25 00:08:09
554
原创 Vue全家桶之vue-router
目录路由安装及配置传参queryparams导航this.$router嵌套路由路由守卫前端路由模式hash和history两种模式的实现原理两种模式的区别关于history模式下404的解决方案vue-router原理剖析路由安装及配置总结插件使用：安装 vue add router选项配置 new VueRouter({ r...
2020-02-23 23:48:16
211
原创 Vue全家桶之vuex
目录简介&安装状态(state)与变更(mutations)派生状态(getters)异步操作(actions)简化方法简介&安装Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态1. 安装vue add vuex2. 概览import Vue from 'vue'import Vuex fr...
2020-02-22 21:14:17
176
原创 Vue总结篇之组件通信
目录父子组件通信propsevents（emit、emit、emit、on）ref、parent、parent、parent、children非父子组件通信$attrs & $listeners (祖孙通信)provide & inject (祖孙通信)全局通信eventBus(中央数据总线)Vuex父子组件通信通过 props 向下传...
2020-02-22 21:07:01
94
原创 JavaScript异步之回调和Promise
目录JavaScript的异步机制JS是异步也是同步JavaScript的运行机制事件循环任务队列回调函数顺序执行不可信任的第三方PromisePromise解决了信任问题Promise链式调用Promise 的局限性JavaScript的异步机制程序中现在运行的部分和将来运行的部分之间的关系就是异步编程的核心。JavaScript程序总是...
2020-01-13 21:38:54
368
原创 深入浅出JavaScript的“值与类型”
目录值的7种类型typeof的几种例外typeof的安全防范机制特殊数值NaNInfinity0 与 -0原生函数强制类型转换三种抽象规则数字的转换布尔值转换字符串转换宽松相等的类型转换值的7种类型JS中有 7 种主要值类型：stringnumberbooleannullundefinedsymbol （ES6 中新增）obje...
2020-01-13 14:36:42
111
原创 Vue源码之模板编译原理
目录模板编译整理流程解析器——ASTHTML解析器文本解析器过滤器解析器优化器代码生成器模板编译整体流程在Vue中我们有三种方式来创建HTML模板手动写渲染函数JSX渲染函数是最原始的方法，而模板最终会通过编译转换陈渲染函数。渲染函数执行后，会得到一份vnode用来渲染真实DOM。所以，模板编译其实是配合虚拟DOM进行渲染，想详细了解虚拟DOM，可以参考Vu...
2019-12-24 21:33:44
2114
原创 vue中的虚拟dom
目录vue为什么引入虚拟DOM?vue中虚拟DOM干了啥？vue中的虚拟DOM如何创建的？vue中的Vnode类patch创建新增节点删除废弃节点修改需要更新的节点vue中虚拟DOM的优化具体思路具体实现vue为什么引入虚拟DOM?vue1.0响应式粒度太细，Object.defineProperty()每个数据的修改都会通知watcher，进而通知do...
2019-12-24 21:31:16
3465
原创 vue源码之Array
目录Vue中对Array和Object追踪方式的不同之处？拦截原型创建拦截器如何拦截响应式具体实现依赖收集到哪里？如何收集？通知依赖数组子集和新增元素的追踪数组子集转换成响应式新增元素转换成响应式Array中的问题Vue中对Array和Object追踪方式的不同之处？Object通过setter改变属性的值，所以我们利用getter时发送依赖收集，...
2019-12-22 18:42:22
1107
原创 作用域和闭包
目录什么是作用域？JS的词法作用域函数作用域和块级作用域闭包什么是作用域？作用域是一套规则，用于确定在何处以及如何查找变量。——《你不知道的JavaScript上卷》当一个块或者函数嵌套在另一个块或者函数中时，就发生了作用域嵌套查找变量的规则是：从当前作用域开始查找变量，如果找不到，继续向上级查找，直到全局作用域停止。由当前作用域到全局作用域中发生的嵌套就形成了作用域链。...
2019-12-20 18:45:00
94
原创 揭开this面纱
目录为什么要使用this?this到底是什么？如何判断this？this绑定的四种规则及优先级什么情况绑定会丢失？ES5硬绑定bind()函数ES6箭头函数不使用this的四种规则为什么要使用this?this提供了一种更优雅的方式来隐式“传递”一个对象的引用，使用this，函数可以自动引用合适的上下文对象。this到底是什么？this是一种机制，在js运行时进行上...
2019-12-20 12:29:42
80
原创 Vue源码之Object数据劫持
目录vue中如何侦测Object变化？Object.defineProperty数据劫持原理Object 响应式中的问题vm.$set内部原理vm.$delete内部原理vm.$watch内部原理用法watch内部实现原理deep实现原理vue中如何侦测Object变化？js中两种侦测对象变化方法：使用Object.definePropertyE...
2019-12-18 01:12:31
410
原创 鉴权
目录cookie-session模式session源码实现koa sessionRedis 全局sessiontoken JWT模式JWT原理koa JWT优势扩展oauth2(第三方登录)oss(单点登录)cookie-session模式session源码实现cookie是什么服务器通过Set-Cookie 响应头设置Cookie浏...
2019-12-17 14:49:00
242
原创 微信公众号网页开发
目录网页授权微信JS-SDK概述公众号主要通过公众号消息会话和公众号内网页来为用户提供服务的公众号内网页许多复杂的业务场景，需要通过网页形式来提供服务，这时需要用到：1）网页授权获取用户基本信息：通过该接口，可以获取用户的基本信息（获取用户的OpenID是无需用户同意的，获取用户的基本信息则需用户同意）2）微信JS-SDK：是开发者在网页上通过JavaScript代码使用微信原...
2019-12-16 16:43:14
547
原创 微信公众号开发入门级
目录了解微信公众号公众号的种类及入口申请自己的公众号成为开发者测试账号开通与配置安装sunny-ngrok实现外网映射编写接口验证微信服务器完成配置消息回复调用微信api了解微信公众号公众号的种类及入口申请自己的公众号成为开发者详情参阅：公众号简介与开发者申请.pdf测试账号开通与配置在进⾏公众号开发时，通常会先在测试账号中进⾏开发调试，经测试...
2019-12-14 14:55:45
315
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人