墨客的全栈之路-CSDN博客

原创 React before mutation阶段

commit阶段分为三个部分before mutation阶段mutation阶段layout阶段主要都是在commitRootImpl函数内进行调用commitRootImpl这里只展示调用before mutation阶段的代码if (firstEffect !== null) { // 保存之前的优先级，以同步优先级执行，执行完毕后恢复之前优先级 const previousLanePriority = getCurrentUpdateLanePriority(); se

2022-04-10 20:52:24 659

原创 React commit阶段解析-前置学习

在renderRootSync执行完render相关阶段后，就会进入commit阶段。performSyncWorkOnRoot函数执行的末尾调用commitRoot(root);commit阶段工作在 rootFiber.firstEffect 上保存了一条需要执行副作用的 Fiber 节点的单向链表effectList，这些 Fiber 节点的 updateQueue 中保存了变化的 props。这些副作用对应的 DOM 操作在commit 阶段执行。除此之外，一些生命周期钩子（比如 com

2021-10-23 20:25:20 167

原创 React render阶段解析三-completeWork流程

这次是接着上一期render阶段的文章，解析挂载时render阶段的"归"阶段----completeWork函数completeWork开始阶段在performUnitOfWork中执行完beginWork，就会进入下面判断 if (next === null) { // workInProgress已经不存在子树，就开始进行"归"阶段 completeUnitOfWork(unitOfWork); } else { // next是beginWork调用后的返回值w

2021-10-16 21:02:13 286

原创 React render阶段解析二-beginWork流程

这次是接着上一期render阶段的文章，解析挂载时render阶段的"递"阶段----beginWork函数beginWork的调用performUnitOfWork函数内部执行beginWork的函数// ProfileMode 模式下，猜测和性能分析相关if (enableProfilerTimer && (unitOfWork.mode & ProfileMode) !== NoMode) { startProfilerTimer(unitOfWork);

2021-10-02 12:16:16 277

原创 React render阶段解析一

今天来讲一下render函数到render阶段的流程，render阶段和render函数不是同一个东西哦！render阶段是react Fiber节点创建的阶段，也是我们diff算法执行的主要阶段。render函数是挂载和渲染jsx节点的入口函数。scheduleUpdateOnFiberscheduleUpdateOnFiber函数从执行栈来看是在updateContainer函数中调用，主要是处理优先级和挂载更新节点function scheduleUpdateOnFiber( fibe

2021-09-25 21:38:10 374

原创 React render流程解析

学习react源码首先从react入口函数开始学习，这篇文章你将学习到如何进行调试代码和学会react render执行流程。调试代码这里只是进行简单的流程介绍，具体的可以看卡颂老师的拉取源码教程# 拉取代码git clone https://github.com/facebook/react.git# 执行打包命令yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE# 通过yarn link改变依赖包

2021-09-12 13:42:40 474

原创 Vue3 launch-editor源码解读

若川的解读文章据说 99% 的人不知道 vue-devtools 还能直接打开对应组件文件？本文原理揭秘： https://juejin.cn/post/6959348263547830280 尤雨溪开发的 vue-devtools 如何安装，为何打开文件的功能鲜有人知？：https://juejin.cn/post/6994289281141309476川哥最近组织了一次源码共读活动。每周读 200 行左右的源码。感兴趣可以关注他的公众号若川视野。准备把川哥的文章过一遍，明确目标学习目标.

2021-09-05 21:20:19 596

原创 vue3 release 源码解读

若川源码解读源地址：https://juejin.cn/post/6997943192851054606感谢若川哥组织的阅读源码活动，收获很大，想加入的小伙伴看过来: 公告1. 相关依赖包const args = require('minimist')(process.argv.slice(2))const fs = require('fs')const path = require('path')const chalk = require('chalk')const semver = r.

2021-08-30 12:40:36 209

原创 promise一道笔试题

promiselet promise1 = Promise.resolve().then(res => console.log(1)).then(res => console.log(2))let promise2 = new Promise(resolve => { setTimeout(() => { console.log(6); resolve() })}).then(res => console.log(3))

2020-09-06 23:00:42 342 1

原创凡科前端面试

记一次凡科前端面试笔试题BFC描述隐藏元素表示显示函数输出结果，new a(), new a.b(), new a().b()跨域通信方式类似虚拟dom元素，实现广度遍历和深度遍历一面自我介绍讲述数据类型对浏览器渲染机制的讲述promise描述浏览器Event Loop描述react和vue区别react hook描述二面自我介绍react优化方法，shouldComponentUpdate和 React.PureComponent（之前看官网出现过，面试时忘了）

2020-09-04 22:35:40 877 7

原创 js的call，apply，bind略读

js的call，apply，bindcallapplybindcall，apply，bind主要用法在执行函数的时候能改变函数中的this指向，callcall(this, arguments…)，第一个参数传入想要指向的this把THIS(FN)中的"函数里面的THIS关键字"修改为第一个参数值(OBJ)，也就是像类里面的this.name。。如果使用call那这个this就是传进来的把THIS(FN)执行,把第二个及以后接受的参数值传递给函数(10,20)call的内部机制其实是执行调用

2020-08-20 23:39:14 99

原创 combineReducers解读

当使用多个模块的时候，可以使用combineReducers函数实现最终合并//使用let reducer = combineReducers({ menu, login});具体写在注释上面function combineReducers(reducers) { //reducerKeys 把reducer对象的属性名，并生成数组 var reducerKeys = Object.keys(reducers); var finalReducers = {};

2020-08-12 23:35:42 226

原创 Redux源码createStore解读常用方法

Redux源码createStore解读传入参数getStatedispatch派发行为传入参数reducer，reducer行为函数preloadedState，初始化state数据enhancer，使用（中间件等），不常用const store = createStore(reducer, [preloadedState], enhancer);getState直接返回当前currentState，获取state值，@return state（我觉得应该深克隆一个新的对象返回，不然有

2020-08-10 13:42:15 212

原创使用node爬取表情包存进数据库

这里写目录标题准备模块连接数据库请求获取页面数据写入数据库并且保存在本地准备模块使用的axios,cheerio,mysql模块都是第三方模块，需要提前下载let mysql = require('mysql'), axios = require('axios'), cheerio = require('cheerio'), path = require('path'), fs = require('fs');连接数据库 let options = {

2020-05-16 23:37:19 244

原创 Sass的常用语法

文章目录基本用法变量@mixin函数继承@extend注释在学习阮一峰的SASS用法指南和网上一些视频，总结sass常用语法基本用法首先要下载Ruby语言（略）将scss生成css文件，在命令行输入//直接生成压缩后的css文件sass --style compressed new.scss new.min.css//监视某个文件下的scss改变就会直接生成csssass -...

2020-03-09 09:25:18 10392

原创微信小程序菜单，实现菜单左右联动

文章目录原理代码实现展示图片原理首先是获取数据，并且获取数据的长度（需要根据长度来计算元素的高度），通过遍历数据的内容通过题目和元素个数的相加得到高度，当消失高度小于等于某个元素的高度就设定索引值给左边的菜单目录实现右边滑动左边联动，左边的菜单点击事件联动比较简单就不说代码实现wxml<view class="menu"> <view class...

2020-03-05 20:10:48 2733

原创 JS变量的一些问题

JS基础2ES5变量提升变量提升//ES5/** 变量提升： =>当栈内存（作用域）形成，JS代码自上而下执行之前，浏览器首先会把带 var/function 关键词的进行提前 “声明” / “定义”，这种预先处理的机制为“变量提升”； => 声明(declare): var a / function sum (默认值undefined) => 定义(def...

2020-02-10 15:51:56 140

原创总结学习JS的笔记

浏览器内核现在是多服务器共存，数据服务器，web服务器webkit内核（V8引擎）谷歌ChromeSafariOpera 14+国产浏览器手机浏览器…Gecko火狐FirefoxPrestoOpera 14-TridentIEIE edge双内核(包含Chromium)谷歌浏览器开发者工具Elements:查看结构样式Console...

2019-11-26 20:26:00 287

原创关于一些JS变量赋值在浏览器中的底层实现

浏览器栈内存分享一些学习到的笔记浏览器执行JS代码：从电脑内存分配一块内存，执行代码（即栈内存 => Stack）；分配一个主线程自上而下执行JS代码栈内存栈内存又会分配出几个存储空间变量存储空间值存储空间代码执行空间（主线程）:基本数据类型代码进栈执行例如let a = 1创建变量a放进当前栈内存变量存储区域创建一个值1，存储到栈内存值区域中（简单的...

2019-11-16 16:35:53 421

原创浅谈浏览器渲染机制和性能优化

浏览器渲染机制和一些性能优化方法在学习前端一些知识后，分享一下学习到的浏览器渲染机制渲染机制浏览器是多线程的工具，通过客户端响应完成，浏览器就会开辟一个栈内存同时分配一个主线程去执行和解析代码，在遇见服务器返回的html文件中的外部引入文件时（例如css,js和img），就会把这些外部的文件放入一个任务队列里面等待DOM完全被读取，生成DOM树，就会读取任务队列里面的任务队列，直到生成CSS...

2019-11-14 22:52:25 270

schooling_chan的博客