React面试总结

React中JSX转换为真实Dom的过程

可以从几个大体过程来看

  1. jsx语法解析
    jsx语法解析成js代表的对象,即把jsx语法转换为基于js的React.createElement(args1,args2,args3),args1,args2,args3分别是标签类型、属性和标签内容,主要利用的是babel等库
  2. 虚拟dom构建
    react基于js的对象构建虚拟dom。虚拟dom是个树形结构,用于描述页面的结构和属性
  3. 虚拟dom的diff
    react会对比vdom更新操作前后的虚拟dom,找出两者差异
  4. 真实dom的操作
    对比出虚拟dom的差异后,将dom更新在真实dom上生效

React生命周期

  • 挂载

    组件初始化

    • constructor 初始化state和props
    • static getDrivedStateFromProps
    • render 创建虚拟dom
    • didmount 第一次渲染后
  • 更新

    state和props发生变化时更新组件

    • static getDrivedStateFromProps
    • shouldComponentUpdate 返回bool值,返回为true才会继续后面的生命周期
    • render
    • didupdate
  • 卸载

    组件卸载时

  • willUnmount

  • static getDrivedStateFromProps

  • render

React setState

setState是个异步方法,会把每次的state放在事件队列中,批量执行,核心是利用了Object.assign(oldState,newState)

fiber

产生由来

react18前,dom更新是通过深度遍历比较vdom的,这个过程是不可打断的(因为只记录的子节点,没有兄弟节点),当dom树深度较深时,就会导致栈深度较深,会占用主线程的渲染资源,所以出现了fiber。fiber其实就是进阶版虚拟dom,是一个含有多个dom属性的js对象,本质是一个含有三个指针的链表结构,分别指向父亲节点、兄弟节点和子节点,这个结构保证了fiber的遍历比较可以被中断(因为不需要重新去遍历dom树节点)

初始化

更新

相关推荐
IT_陈寒4 分钟前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start21 分钟前
前端基础一、HTML5
前端·html·html5
Never_Satisfied29 分钟前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
鬼谷中妖30 分钟前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A35 分钟前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER36 分钟前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父40 分钟前
前端速通—CSS篇
前端·css
pixle043 分钟前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf19871 小时前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH1 小时前
WHAT - 前端性能指标(加载性能指标)
前端