点了个汤-CSDN博客

原创 FE常用算法搜集记录

常见算法写一个 mySetInterVal(fn, a, b),每次间隔 a,a+b,a+2b,…,a+nb 的时间，然后写一个 myClear，停止上面的 mySetInterValfunction MySetInterVal(fn:Function,a:number,b:number){ this.a=a; this.b=b; this.time=0; this.timer=-1; this.start=()=>{ this.timer=

2022-02-08 17:40:49 436

原创 react合成事件

react合成事件概念react合成事件是react模拟原生dom事件所有能力得一个事件对象。拥有与浏览器原生事件相同的接口。本篇文章基于V17.0.3来研究react的合成事件都知道react16是把事件绑定在document上，自己实现了一套事件机制，react17的区别是把事件绑定到根节点起源从react将jsx解析成element的格式。带有事件的情况会解析成如下所示：props解析携带onClick{$$typeof: Symbol(react.element), type: 'd

2022-01-28 17:46:01 2681

原创 call bind Apply 实现原理及部分数组实现原理

call bind apply 实现原理及部分数组实现原理区别？call和apply的作用都是使用一个指定的this值和单独给出的一个或多个参数来调用一个函数。区别在于call接受的参数是参数列表，apply接受的是一个包含多个参数的数组bind方法创建一个新的函数，在调用之前，新函数的this被指定为bind的第一个参数，其余参数作为新函数的参数。供调用时使用call 实现利用的是this的指向问题是谁调用就指向谁这个特性// call const obj={ name:'luo'

2022-01-25 17:57:29 632

原创常见css相关问题

常见css相关问题Link和@import的区别两者都是外部引用CSS的方式，它们的区别如下：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。link支持使用Javascript控制DOM去改变样式；而@import不支持。

2022-01-14 17:03:53 441

原创 PromiseA+规范及手写Promise

PromiseA+规范及手写Promisepromise的状态一个promise有三种状态：等待态（Pending）、执行态（Fullfilled）、拒绝态（Rejected），初始的状态为Pending，可以变更为剩下两种状态种的其中一种，但一旦变更之后，不可再次改变状态满足A+规范三种状态的情况并状态变更只以第一次为准：class FackPromise{ // 定义初始状态 private promiseState:string="Pending"; // 定义初始返回

2021-10-11 14:02:43 377

原创 hooks-useContext

hooks-useContext上例子function FunctionComponent(props) { const context = useContext(Instance); console.log('qy:context-----',context); return ( <div className="border"> <p onClick={()=>{ }}>{props.name}</p> &

2021-08-25 16:08:24 123

原创 hooks-useMemo和useCallback

hooks-useMemo和useCallback先上案例function FunctionComponent(props) { // const [state, dispatch] = useState(1); const [state2, dispatch2] = useState(1); const memoValue=useMemo(()=> state+state2,[state,state2]); const computed= useCallback( (

2021-08-06 16:49:36 150

原创 hooks-useEffect及useLayoutEffect

hooks-useEffect及useLayoutEffectdemo，本案例贴的代码是有关研究的核心代码。会删除其他的与研究无关的代码。function FunctionComponent(props) { // const [state, dispatch] = useState(1); const [state2, dispatch2] = useState(1); useEffect(() => { console.log('qy:1-----',1);

2021-08-04 18:32:37 279

原创 hooks-useState

hooks-useState案例function FunctionComponent(props) { // const [state, dispatch] = useState(1); return ( <div className="border"> <p onClick={()=>{ dispatch(2); }}>{props.name}{state}</p> </div&gt

2021-07-30 18:50:25 293

原创 hooks-useReducer源码

hooks-useReducer源码现目前react端都流行hooks写法，但不能只会用而不清楚它是怎么实现的，所以今天我就来研究hooks到底是怎么实现的。源码版本：17.0.2demo:function FunctionComponent(props) { // 两个reducer const [state, dispatch] = useReducer((x)=>x+1, 1); const [stateTwo, dispatchTwo] = useReducer((x)=&g

2021-07-09 18:37:18 292

原创 react的渲染更新机制

react的渲染更新机制react源码分为以下几个模块：schedule（调度器）根据得到的优先级（priority）进行调度，决定哪个任务先进行调和（reconciler），reconciler (协调器)，发生在render阶段，它的主要任务是找出哪些节点发生了改变，并打上标记（tag）renderer（渲染器），发生在commit阶段将reconciler打好标记的节点渲染到视图上react的总流程分为几个阶段：1.入口2.render阶段,分别为节点执行beginwor

2021-04-30 14:56:01 1534 4

原创 react-router原理探索

react-router原理探索historyhistory是浏览器提供的api，window.history指向History对象，表示当前的浏览历史。提供的api如下：history.pushState(state,title,url)// 往路由加入要给堆栈，并且跳转,不刷新页面history.replaceState(state,title,url)// 替换当前路由，不刷新页面。history.go()// 后退或前进几次history.forward()// 前进history.b

2021-01-27 18:47:05 126

原创 react-saga原理探索

redux-saga原理探索这篇文章是为了取探索saga的异步工作流和effect的处理，探究他的思路和工作原理。redux的applyMiddleware从头开始撸saga是一个redux的中间件，而redux提供了一个applyMiddleware(...middlewares)函数，middleware它提供的是位于 action 被发起之后，到达 reducer 之前的扩展点，可以接收store的dispatch和getState方法，我们来做一个简单的测试去理解redux的中间件。第

2021-01-18 20:38:25 1048

原创 react的类组件和hooks组件性能优化

react的类组件和hooks组件的性能优化回顾es6react的性能优化点：无论我们的state的值是否改变，只要我们调用setState就会触发。父组件更新，子组件也会更新。解决方案：es6的时候在我们的声明周期内部有shouldComponentUpdate，我们可以在这里面判断前后的props和state是否有改变，如果没有变化，则返回false来阻止更新。class App extends Component { state={ num:1, }

2021-01-11 19:00:45 745

原创函数柯里化及经典案例

函数柯里化及经典案例先解释什么是柯里化，currying，把接收多个参数的函数变为接收单一单一参数的函数，并且返回接收剩余参数而且返回结果的新函数。前因我接收到柯里化是因为一次面试，题干是这样的let a=add(1)(1)(3)() 要求实现这个函数让里面的参数能到递加得到结果const add=(a)=>{ let current=a; let adder=function(b:any){ if(b){ current=cur

2021-01-10 22:37:24 371

原创回顾2020展望2021

回顾2020展望20212021年，毕业两年半了，今年经历了疫情，于是我开启了我人生的第一次考研之路，初心是为了弥补自己在本科对数据结构、网络等专业基础知识的回顾和巩固，给自己的一个学习目标，也希望能够通过上岸成功可以接受到更系统的软件开发思维，自己本行的知识也没有落下太多，已经有了对项目规划、整体系统迭代和演进、以及对react部分原理和js的基础性知识进行了深入的理解。但远远还不够，与我来说，目前这些东西我只是得到了理论，所以在2021我有了自己的目标。2020达成目标数据结构方面，包括数组、字

2021-01-06 20:50:10 163

原创 event loop 事件循环

event loop从程序的角度来说。event loop是一个程序结构。用于等待和发送消息和事件。程序中有两个线程，一个负责程序本身的运行，为主线程，一个负责主线程和其他线程的通信。同步任务、异步任务、宏任务、微任务同步任务：就是我们的单线程顺序执行的代码，异步任务：分为宏任务和微任务微任务：promise.then、process.nextTick(node的api，把当前任务放在执行栈最后执行，执行站完毕之后，先执行nextTick，在到等待队列找)宏任务：promise（他是

2020-12-29 18:50:34 114

原创原型原型链

原型产生的原因？因为构造函数每次创建对象，有一个方法是频繁使用的，如果该方法放在这个构造函数上，那么我new1000个该构造函数。内存地址对这个频繁使用的方法也需要有1000个位置存在。由此产生了原型。什么是原型？原型前面加上一个模板原型，可以理解为我们从哪儿来的，长啥样，基因是谁的。这个就是原型（即父亲）。几个概念：构造函数，是创造我们的人，也就是母亲prototype,是一个对象，就是我们说的原型。也就是父亲在js里，constructor是原型自带的属性指向当前的构

2020-12-29 18:50:02 167

原创快速排序思想

快速排序思想将数组首元素作为枢纽，左边小于枢纽，右边大于枢纽将左边数组和右边数组分别选取首元素为枢纽，采用递归。直到每部分内只有一个元素或为空位置，最终得到的就是排好序的数组算法实现let sortArray=(nums)=>{ quickSort(nums,0,nums.length-1); return nums;}const quickSort=(nums,low,high)=>{ if(low<high){ let p

2020-11-01 22:33:51 124

原创深度优先搜索和广度优先搜索

深度优先搜索（DFS）和广度优先搜索（BFS）这两种算法思想在数据结构内都是解决图论相关的知识。也能提供一些对问题解决的思路。BFSBFS如其命名一样，是需要将一个层次的问题解决完毕之后才会去解决下一层次的问题。较为经典的是二叉树的层次遍历。：思想需要借助队列，先将根节点推入队列中，队列有一个元素了，循环队列，队不空，执行出队，并将该节点的左右孩子依次入队，以此类推。typedef struct queue{ struct TreeNode *data[1009]; int h

2020-10-28 20:18:55 119

原创特殊矩阵的压缩存储

特殊矩阵的压缩存储数组定义一维数组视为线性表，二维数组为线性表的线性表一维数组的存储地址为：（数组首地址a0,L为每个元素的存储单位）。ai=a0+i*L二维数组的存储分按行存储和按列存储：（数组首地址a(0,0),L为每个元素的存储单元，h1是行下标最大值，h2是列下标最大值）按行存储ai=a(0,0)+[i*(h1+1)+J] * L按列存储ai=a(0,0)+[j*(h2+1)+i] * L上面两个例子用简单的话来说就是一维数组用计算机来表示的位置得一个唯一

2020-10-28 20:18:20 357

原创浏览器工作原理-V8引擎

浏览器工作原理-v8引擎内存数据存储栈空间栈空间是存储调用栈的上下文的。堆空间堆空间是存储引用类型的数据。为什么会有堆空间？因为栈空间需要频繁的释放和添加。需要快速的响应。栈空间的大小不大、而有很多数据是很大的。所以有了堆空间。堆空间的数据，是在栈空间中有一个引用地址，对应的堆空间内。当我们访问的时候通过引用地址访问。所以我们对引用类型数据进行复制的时候。只是复制了引用地址，引用的具体数据还是那一个。代码空间存储我们的可执行代码。深拷贝因为引用类型赋值不能达到复制，不影

2020-05-13 18:36:35 1596

原创浏览器工作原理-js执行机制

浏览器工作原理-js的执行js变量的提升console.log(a);var a = 123;show();function show(){ console.log("测试")};这段代码打印出来显示undefined在显示测试，为什么执行函数成功了？变量却打印不出来呢？var a;function show(){ console.log("测试")};console.log(a);show();a=123;打印出来也是一样的。有点神奇，为什么函数可以执行，变量却不

2020-05-13 18:35:25 705

原创浏览器工作原理-渲染流程

浏览器工作原理-渲染流程（浏览器是怎么将html、css、js转换为页面的）渲染的流水线是：构建dom树，样式计算、布局、分层、绘制、分块、光栅化、合成。每个阶段都有输入、处理、输出。三个阶段。构建DOM树输入：我们的html结构处理：将html结构的文本转换为浏览器可识别的dom树。输出：dom树dom树是什么样的？在浏览器console中打印一个document这个就是一个dom树、样式计算我们的dom树有了就需要有样式的计算输入：我们的样式源，link引入、style标签包的

2020-05-12 18:34:45 241

原创浏览器工作原理-HTTP协议

浏览器工作原理-HTTP协议浏览器是多进程还是单进程的？都知道js是单线程，js的运行环境在浏览器的v8引擎，那么浏览器也是单进程的吗？浏览器早期是将所有的功能统一在一个进程里面进行的，而现在的浏览器是多进程多线程的。js的执行环境v8只归浏览器的一个进程中的一个线程。浏览器的进程有几个：浏览器主进程：负责界面显示，子进程的管理，提供存储功能。GPU进程：负责3D绘制相关的处理渲染进程：任务是将html、css、js转换为页面。每一个tab页都是一个渲染进程。这也是为什么我们一个页面崩了其他

2020-05-11 18:50:19 950

原创 react-redux源码研读

react-redux源码研读（版本：4.x）最原始的使用redux数据流的方式是怎样的？我们需要创建多个reducers，并且用combineReducers去合并我们的reducer，利用创建好的reducers，在用createStrore创建state状态，用Provider去包裹我们所有的组件并传递store数据。在使用出用connect链接到store，通过dispatch传递action传递type进去更改state的值。这样的流程大致是redux的工作流程。第一步我们需要用combin

2020-05-09 13:55:33 179

空空如也

空空如也