首页
学习
活动
专区
工具
TVP
发布

高级前端工程师学习必备

专栏作者
52
文章
26040
阅读量
19
订阅数
面试官:useLayoutEffect和useEffect的区别
hello,这里是潇晨,大家面试的过程中有没有遇到过这样的问题呢,useLayoutEffect和useEffect的区别是什么,大家可能会回答useEffect是异步的,useLayoutEffect是同步的,这样回答面试官真的会满意慢,我们需要说清楚他们在源码中的调用时机。
全栈潇晨
2021-12-15
1.5K0
面试官:react中的setState是同步的还是异步的
hello,这里是潇晨,大家在面试的过程是不是经常会遇到这样的问题,react的setState是同步的还是异步的,这个问题回答的时候一定要完整,来看下面这几个例子:
全栈潇晨
2021-12-15
8810
面试官:说说react的渲染过程
hello,这里是潇晨,大家在面试的过程中有没有遇到过一些和react相关的问题呢,比如面试官让你说说react渲染的过程,这到题目比较开放,也比较考验大家对react渲染原理以及源码的整体架构的理解。
全栈潇晨
2021-12-14
5670
面试官:说说你对react生命周期的理解
hello,这里是潇晨,今天我们来看下react生命周期在各个阶段是怎样执行的,在面试的过程中有没有遇到这个问题呢,大家也可以学习往期react源码体系文章哦,往期文章目录在文章结尾。
全栈潇晨
2021-12-13
4070
面试官:你是怎样理解Fiber的
hello,这里是潇晨,今天我们来聊一聊Fiber。不知道大家面试的时候有没有遇到过和react Fiber相关的问题呢,这一类问题比较开放,但也是考察对react源码理解深度的问题,如果面试高级前端岗,恰巧你平时用的是react,那这道面试题是你必需要会的一道。
全栈潇晨
2021-12-10
5580
老大react说:schedule,我们今年的小目标是一个亿
从前,有家z公司,z公司的ceo叫react,它收下有个小弟或者叫小leader,schedule
全栈潇晨
2021-12-09
3330
来来来,手摸手写一个hook
来来来,手摸手写一个hook hello,这里是潇晨,今天就带着大家一起来手写一个迷你版的hooks,方便大家理解hook在源码中的运行机制,配有图解,保姆级的教程,只求同学一个小小的 第一步:引入React和ReactDOM 因为我们要将jsx转变为virtual-dom,这一步分工作就交给babel吧,而jsx被babel进行词法解析之后会形成React.createElement()的调用,而React.createElement()执行之后的返回结果就是jsx对象或者叫virtual-dom。 又因
全栈潇晨
2021-12-09
5000
好好学react源码然后惊艳所有人
hello,这里是潇晨,今天我们来聊聊react源码,作为使用react多年的前端工程师,我们是否还在使用着各种应用层面的库、框架呢,是否在面试过程中遇到一些关于react源码方面的问题呢,如果是,那么是否尝试过去看看react底层运行逻辑呢?
全栈潇晨
2021-12-08
5150
react源码解析20.总结&第一章的面试题解答
至此我们介绍了react的理念,如果解决cpu和io的瓶颈,关键是实现异步可中断的更新
全栈潇晨
2021-06-25
1.2K0
react源码解析19.手写迷你版react
react源码解析19.手写迷你版react 视频课程(高效学习):进入课程 课程目录: 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.contex
全栈潇晨
2021-06-24
7100
react源码解析18事件系统
下面这个demo_13在react17和react16中有什么不同吗?代码也很简单,模拟一个modal框,点击显示出现,点击其他地方,相当于点击了mask,modal消失,因为react事件都是委托到上层,所以需要在handleClick阻止冒泡,这样点击显示的时候不会触发document上的事件回调,导致modal无法显示。但是在react16上发现这样做还是不行,需要调用e.nativeEvent.stopImmediatePropagation()才能实现,而react17上没什么影响
全栈潇晨
2021-06-23
4560
react源码解析17.context
react源码中存在一个valueStack和valueCursor用来记录context的历史信息和当前context,另外还有一个didPerformWorkStackCursor用来表示当前的context有没有变化
全栈潇晨
2021-06-22
5210
react源码解析16.concurrent模式
react17支持concurrent mode,这种模式的根本目的是为了让应用保持cpu和io的快速响应,它是一组新功能,包括Fiber、Scheduler、Lane,可以根据用户硬件性能和网络状况调整应用的响应速度,核心就是为了实现异步可中断的更新。concurrent mode也是未来react主要迭代的方向。
全栈潇晨
2021-06-21
5440
react源码解析15.scheduler&Lane
当我们在类似下面的搜索框组件进行搜索时会发现,组件分为搜索部分和搜索结果展示列表,我们期望输入框能立刻响应,结果列表可以有等待的时间,如果结果列表数据量很大,在进行渲染的时候,我们又输入了一些文字,因为用户输入事件的优先级是很高的,所以就要停止结果列表的渲染,这就引出了不同任务之间的优先级和调度
全栈潇晨
2021-06-18
5210
react源码解析14.手写hooks
最关键的是要理解hook队列和update队列的指针指向和updateQueue的更新计算,详细见视频讲解
全栈潇晨
2021-06-17
4200
react源码解析13.hooks源码
​ 在hook源码中hook存在于Dispatcher中,Dispatcher就是一个对象,不同hook 调用的函数不一样,全局变量ReactCurrentDispatcher.current会根据是mount还是update赋值为HooksDispatcherOnMount或HooksDispatcherOnUpdate
全栈潇晨
2021-06-16
6360
react源码解析12.状态更新流程
我们重点看下重点看下this.setState和this.forceUpdate,hook在第13章讲
全栈潇晨
2021-06-15
1K0
react源码解析11.生命周期调用顺序
函数组件hooks的周期会在hooks章节讲解,这一章的使命周期主要针对类组件,各阶段生命周期执行情况看下图:
全栈潇晨
2021-06-11
3160
react源码解析10.commit阶段
在render阶段的末尾会调用commitRoot(root);进入commit阶段,这里的root指的就是fiberRoot,然后会遍历render阶段生成的effectList,effectList上的Fiber节点保存着对应的props变化。之后会遍历effectList进行对应的dom操作和生命周期、hooks回调或销毁函数,各个函数做的事情如下
全栈潇晨
2021-06-10
4040
react源码解析9.diff算法
在render阶段更新Fiber节点时,我们会调用reconcileChildFibers对比current Fiber和jsx对象构建workInProgress Fiber,这里current Fiber是指当前dom对应的fiber树,jsx是class组件render方法或者函数组件的返回值。
全栈潇晨
2021-06-09
2530
点击加载更多
社区活动
Python精品学习库
代码在线跑,知识轻松学
【玩转EdgeOne】征文进行中
限时免费体验,发文即有奖~
博客搬家 | 分享价值百万资源包
自行/邀约他人一键搬运博客,速成社区影响力并领取好礼
技术创作特训营·精选知识专栏
往期视频·干货材料·成员作品·最新动态
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档