- 博客(42)
- 收藏
- 关注
RSS订阅
1原创 2022必会的前端手写面试题
面试题视频讲解（高效学习）：进入学习二、题目1. 防抖节流这也是一个经典题目了，首先要知道什么是防抖，什么是节流。 防抖： 在一段时间内，事件只会最后触发一次。 节流： 事件，按照一段时间的间隔来进行触发。 实在不懂的话，可以去这个大佬的Demo地址玩玩防抖节流DEMO // 防抖 function debounce(fn) { let timeout = null; return function () {
2022-05-01 13:40:15
178
原创 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.concurre
2022-04-14 06:31:56
168
原创 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
2022-04-14 06:29:47
204
原创 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-13 06:30:57
148
原创 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-13 06:29:02
149
原创 react源码解析16.concurrent模式
react源码解析16.concurrent模式视频讲解（高效学习）：进入学习concurrent modereact17支持concurrent mode，这种模式的根本目的是为了让应用保持cpu和io的快速响应，它是一组新功能，包括Fiber、Scheduler、Lane，可以根据用户硬件性能和网络状况调整应用的响应速度，核心就是为了实现异步可中断的更新。concurrent mode也是未来react主要迭代的方向。cup：让耗时的reconcile的过程能让出js的执行权给更高优先级的任务
2022-04-12 08:26:10
215
原创 react源码解析15.scheduler&Lane
react源码解析15.scheduler&Lane视频讲解（高效学习）：进入学习当我们在类似下面的搜索框组件进行搜索时会发现，组件分为搜索部分和搜索结果展示列表，我们期望输入框能立刻响应，结果列表可以有等待的时间，如果结果列表数据量很大，在进行渲染的时候，我们又输入了一些文字，因为用户输入事件的优先级是很高的，所以就要停止结果列表的渲染，这就引出了不同任务之间的优先级和调度Scheduler我们知道如果我们的应用占用较长的js执行时间，比如超过了设备一帧的时间，那么设备的绘制就会出不的现
2022-04-12 08:23:30
315
原创 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-02-14 09:24:50
82
原创 react源码解析13.hooks源码
react源码解析13.hooks源码视频讲解（高效学习）：进入学习hook调用入口 在hook源码中hook存在于Dispatcher中，Dispatcher就是一个对象，不同hook 调用的函数不一样，全局变量ReactCurrentDispatcher.current会根据是mount还是update赋值为HooksDispatcherOnMount或HooksDispatcherOnUpdateReactCurrentDispatcher.current = current ===
2022-02-10 08:14:48
204
原创 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-09 12:05:26
88
原创 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.
2022-01-13 08:24:28
74
原创 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.
2022-01-13 08:19:30
58
原创 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:46:05
74
原创 react源码解析10.commit阶段
react源码解析10.commit阶段视频讲解（高效学习）：进入学习在render阶段的末尾会调用commitRoot(root);进入commit阶段，这里的root指的就是fiberRoot，然后会遍历render阶段生成的effectList，effectList上的Fiber节点保存着对应的props变化。之后会遍历effectList进行对应的dom操作和生命周期、hooks回调或销毁函数，各个函数做的事情如下在commitRoot函数中其实是调度了commitRootImpl函数//
2021-12-28 07:41:20
97
原创 react源码解析8.render阶段
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-24 06:43:54
109
原创 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:28:09
76
转载 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-16 12:27:28
106
原创 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:22:14
93
转载 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-15 08:21:18
52
转载 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-15 08:14:12
58
原创 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.concurre
2021-12-14 09:39:22
691
原创 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-14 09:33:30
60
原创 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
2021-12-13 09:10:07
824
原创 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
2021-12-13 09:03:06
135
转载 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-10 09:08:42
59
转载 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-10 08:59:13
53
原创 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-09 08:54:41
84
原创 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-09 08:42:44
72
转载 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-08 11:36:48
63
原创 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-08 11:31:47
62
转载 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-07 08:26:37
76
转载 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-07 08:19:20
62
转载 react源码解析8.render阶段
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-06 11:08:44
105
转载 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-06 10:55:52
58
转载 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-04 09:33:54
97
转载 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-04 09:27:42
66
转载 react源码解析4.源码目录结构和调试
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 08:57:30
182
转载 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 08:27:23
60
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人