- 博客(40)
- 收藏
- 关注
RSS订阅
1原创 2022必会的前端手写面试题
面试题视频讲解（高效学习）：进入学习二、题目1. 防抖节流这也是一个经典题目了，首先要知道什么是防抖，什么是节流。防抖： 在一段时间内，事件只会最后触发一次。节流： 事件，按照一段时间的间隔来进行触发。实在不懂的话，可以去这个大佬的Demo地址玩玩防抖节流DEMO// 防抖 function debounce(fn) { let timeout = null; return function () { // 如果事件再次触发就清除定时器，
2022-05-01 14:01:12
156
原创 react源码解析18事件系统
react源码解析18事件系统视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.conte
2022-04-14 06:36:17
187
原创 react源码解析17.context
react源码解析17.context视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.c
2022-04-14 06:34:08
167
原创 react源码解析16.concurrent模式
react源码解析16.concurrent模式视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式
2022-04-13 06:35:30
147
原创 react源码解析15.scheduler&Lane
react源码解析15.scheduler&Lane视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concur
2022-04-13 06:33:32
175
原创 react源码解析14.手写hooks
react源码解析14.手写hooks视频讲解（高效学习）：进入学习最关键的是要理解hook队列和update队列的指针指向和updateQueue的更新计算，详细见视频讲解import React from "react";import ReactDOM from "react-dom";let workInProgressHook;//当前工作中的hooklet isMount = true;//是否时mount时const fiber = {//fiber节点 memoizedS
2022-04-12 08:31:42
91
原创 react源码解析13.hooks源码
react源码解析13.hooks源码视频讲解（高效学习）：进入学习hook调用入口 在hook源码中hook存在于Dispatcher中，Dispatcher就是一个对象，不同hook 调用的函数不一样，全局变量ReactCurrentDispatcher.current会根据是mount还是update赋值为HooksDispatcherOnMount或HooksDispatcherOnUpdateReactCurrentDispatcher.current = current ===
2022-04-12 08:29:25
262
原创 react源码解析12.状态更新流程
react源码解析12.状态更新流程视频讲解（高效学习）：进入学习setState&forceUpdate在react中触发状态更新的几种方式：ReactDOM.renderthis.setStatethis.forceUpdateuseStateuseReducer我们重点看下重点看下this.setState和this.forceUpdate，hook在第13章讲this.setState内调用this.updater.enqueueSetState，主要是将upda
2022-02-14 09:27:36
277
原创 react源码解析12.状态更新流程
react源码解析12.状态更新流程视频讲解（高效学习）：进入学习setState&forceUpdate在react中触发状态更新的几种方式：ReactDOM.renderthis.setStatethis.forceUpdateuseStateuseReducer我们重点看下重点看下this.setState和this.forceUpdate，hook在第13章讲this.setState内调用this.updater.enqueueSetState，主要是将upda
2022-02-10 08:19:44
79
原创 react源码解析11.生命周期调用顺序
react源码解析11.生命周期调用顺序视频讲解（高效学习）：进入学习各阶段生命周期执行情况函数组件hooks的周期会在hooks章节讲解，这一章的使命周期主要针对类组件，各阶段生命周期执行情况看下图：render阶段：mount时：组件首先会经历constructor、getDerivedStateFromProps、componnetWillMount、renderupdate时：组件首先会经历componentWillReceiveProps、getDerivedStateFrom
2022-02-09 12:11:27
271
原创 react源码解析10.commit阶段
react源码解析10.commit阶段在render阶段的末尾会调用commitRoot(root);进入commit阶段，这里的root指的就是fiberRoot，然后会遍历render阶段生成的effectList，effectList上的Fiber节点保存着对应的props变化。之后会遍历effectList进行对应的dom操作和生命周期、hooks回调或销毁函数，各个函数做的事情如下在commitRoot函数中其实是调度了commitRootImpl函数//ReactFiberWorkLo
2022-01-13 08:31:59
76
原创 react源码解析11.生命周期调用顺序
react源码解析11.生命周期调用顺序各阶段生命周期执行情况函数组件hooks的周期会在hooks章节讲解，这一章的使命周期主要针对类组件，各阶段生命周期执行情况看下图：render阶段：mount时：组件首先会经历constructor、getDerivedStateFromProps、componnetWillMount、renderupdate时：组件首先会经历componentWillReceiveProps、getDerivedStateFromProps、shouldComp
2022-01-13 08:29:11
59
原创 react源码解析9.diff算法
react源码解析9.diff算法视频讲解（高效学习）：进入学习在render阶段更新Fiber节点时，我们会调用reconcileChildFibers对比current Fiber和jsx对象构建workInProgress Fiber，这里current Fiber是指当前dom对应的fiber树，jsx是class组件render方法或者函数组件的返回值。在reconcileChildFibers中会根据newChild的类型来进入单节点的diff或者多节点diff//ReactChildF
2021-12-28 07:53:54
97
原创 react源码解析8.render阶段
react源码解析8.render阶段视频讲解（高效学习）：进入学习render阶段的入口render阶段的主要工作是构建Fiber树和生成effectList，在第5章中我们知道了react入口的两种模式会进入performSyncWorkOnRoot或者performConcurrentWorkOnRoot，而这两个方法分别会调用workLoopSync或者workLoopConcurrent//ReactFiberWorkLoop.old.jsfunction workLoopSync()
2021-12-28 07:50:01
92
原创 react源码解析7.Fiber架构
react源码解析7.Fiber架构视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.co
2021-12-24 06:51:51
118
原创 react源码解析6.legacy模式和concurrent模式
react源码解析6.legacy模式和concurrent模式视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.conc
2021-12-24 06:49:24
116
原创 react源码解析3.react源码架构
react源码解析3.react源码架构视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.
2021-12-16 12:35:51
81
原创 react源码解析2.react的设计理念
react源码解析2.react的设计理念视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17
2021-12-16 12:31:46
78
转载 react源码解析20.总结&面试题
react源码解析20.总结&面试题视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式1
2021-12-15 08:30:46
285
转载 react源码解析19.手写迷你版react
react源码解析19.手写迷你版react视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式1
2021-12-15 08:26:44
84
原创 react源码解析18.react事件系统
react源码解析18.react事件系统视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17
2021-12-14 10:07:54
141
原创 react源码解析第17节.context源码
react源码解析第17节.context源码视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式
2021-12-14 09:46:12
183
转载 react源码解析16.concurrent模式
react源码解析16.concurrent模式视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式
2021-12-13 09:18:38
82
原创 react源码解析15.scheduler&Lane
react源码解析15.scheduler&Lane视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concur
2021-12-13 09:15:20
80
转载 react源码解析14.手写hooks
react源码解析14.手写hooks视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.c
2021-12-10 09:19:27
79
转载 react源码解析13.hooks源码
react源码解析13.hooks源码视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.c
2021-12-10 09:14:17
139
转载 react源码解析12.状态更新流程
react源码解析12.状态更新流程视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.co
2021-12-09 09:07:20
75
转载 react源码解析11.生命周期调用顺序
react源码解析11.生命周期调用顺序视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.
2021-12-09 09:04:16
61
转载 react源码解析10.commit阶段
react源码解析10.commit阶段视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.
2021-12-08 11:46:10
69
转载 react源码解析9.diff算法
react源码解析9.diff算法视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.con
2021-12-08 11:42:47
62
转载 react源码解析8.render阶段(看我会对比Fiber哦)
react源码解析8.render阶段视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.c
2021-12-07 08:37:42
184
转载 react源码解析7.Fiber架构
react源码解析7.Fiber架构视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.co
2021-12-07 08:33:22
92
转载 react源码解析6.legacy模式和concurrent模式
react源码解析6.legacy模式和concurrent模式视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.conc
2021-12-06 11:19:13
87
转载 react源码解析5.jsx&核心api
react源码解析5.jsx&核心api视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式
2021-12-06 11:15:24
86
转载 react源码解析4.源码目录结构和调试
react源码解析4.源码目录结构和调试视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.
2021-12-03 10:25:13
119
转载 react源码解析3.react源码架构
react源码解析3.react源码架构视频课程（高效学习）：进入学习课程目录：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.
2021-12-03 10:20:35
77
转载 react源码解析2.react的设计理念
react源码解析2.react的设计理念视频讲解（高效学习）：进入学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17
2021-12-02 10:38:45
79
转载 react源码解析1.开篇介绍和面试题
react源码解析1.开篇介绍和面试题视频讲解（高效学习）：点击学习往期文章：1.开篇介绍和面试题2.react的设计理念3.react源码架构4.源码目录结构和调试5.jsx&核心api6.legacy和concurrent模式入口函数7.Fiber架构8.render阶段9.diff算法10.commit阶段11.生命周期12.状态更新流程13.hooks源码14.手写hooks15.scheduler&Lane16.concurrent模式17.c
2021-12-01 15:31:10
84
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人