• 售前

  • 售后

热门帖子
入门百科

react根本知识总结

[复制链接]
丽人至上再 显示全部楼层 发表于 2021-10-26 13:41:56 |阅读模式 打印 上一主题 下一主题
目次


  • 前言
  • 开始

    • React 生命周期
    • React Fiber
    • React setState
    • React 事件机制


前言


迩来在预备面试。复习了一些react的知识点,特此总结。

开始



React 生命周期


react 16以前的生命周期是如许的
组件在初次渲染时会被实例化,然后调用实例上面的componentWillMount,render和componentDidMount函数。组件在更新渲染时可以调用componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate,render和componentDidUpdate函数。组件在卸载时可以调用componentWillUnmount函数。
借图:

从 React v16.3 开始,React 建议使用getDerivedStateFromProps和getSnapshotBeforeUpdate两个生命周期函数更换 componentWillMount,componentWillReceiveProps和componentWillUpdate三个生命周期函数。这里须要注意的是 新增的两个生命周期 函数和原有的三个生命周期函数必须分开使用,不能混合使用
现在的生命周期(借图):

componentWillMount存在的问题
有人以为在componentWillMount中可以提前进行异步哀求,避免白屏。但是react在调用render渲染页面的时间,render并不会等待异步哀求竣事,再获取数据渲染。这么写是有潜在隐患的。
而在react fiber之后 大概在一次渲染中多次调用。原因是:react fiber技能使用增量渲染来办理掉帧的问题,通过requestIdleCallback调理执行每个任务单元,可以中断和规复,生命周期一旦中断,规复之后会重新跑一次之前的生命周期
新的生命周期
static getDerivedStateFromProps
       
  • 触发时间(v16.4修正):组件每次被rerender的时间,包括在组件构建之后(render之前最后执行),每次获取新的props或state之后。在v16.3版本时,组件state的更新不会触发该生命周期   
  • 每次吸取新的props之后都会返回一个对象作为新的state,返回null则阐明不须要更新state   
  • 配合componentDidUpdate,可以覆盖componentWillReceiveProps的全部用法
getSnapshotBeforeUpdate
触发时间: update发生的时间,在render之后,在组件dom渲染之前。
返回一个值,作为componentDidUpdate的第三个参数。
配合componentDidUpdate, 可以覆盖componentWillUpdate的全部用法。

React Fiber


由于React渲染/更新过程一旦开始无法中断,持续占用主线程,主线程忙于执行JS,无暇他顾(结构、动画),造成掉帧、延长响应(以致无响应)等不佳体验。fiber应运而生。
Fiber 是对react reconciler(调和) 焦点算法的重构。关键特性如下:
       
  • 增量渲染(把渲染任务拆分成块,匀到多帧)   
  • 更新时可以或许暂停,终止,复用渲染任务   
  • 给差异范例的更新赋予优先级   
  • 并发方面新的底子本领
增量渲染用来办理掉帧的问题,渲染任务拆分之后,每次只做一小段,做完一段就把时间控制权交还给主线程,而不像之前长时间占用。
Fiber tree
       
  • Fiber之前的reconciler(被称为Stack reconciler)自顶向下的递归mount/update,无法中断(持续占用主线程),如许主线程上的结构、动画等周期性任务以及交互响应就无法立即得到处置处罚,影响体验。   
  • Fiber办理这个问题的思绪是把渲染/更新过程(递归diff)拆分成一系列小任务,每次检查树上的一小部门,做完看是否还偶然间继续下一个任务,有的话继续,没有的话把本身挂起,主线程不忙的时间再继续。
fiber树着实是一个单链表结构,child指向第一个子节点,return指向父节点,sibling指向下个兄弟节点。结构如下:
  1. // fiber tree节点结构
  2. {
  3.     stateNode,
  4.     child,
  5.     return,
  6.     sibling,
  7.     ...
  8. }
复制代码
Fiber reconciler
reconcile过程分为2个阶段:
1.(可中断)render/reconciliation 通过构造workInProgress tree得出change
2.(不可中断)commit 应用这些DOM change(更新DOM树、调用组件生命周期函数以及更新ref等内部状态)
构建workInProgress tree的过程就是diff的过程,通过requestIdleCallback来调理执行一组任务,每完成一个任务后回来看看有没有插队的(更告急的),每完成一组任务,把时间控制权交还给主线程,直到下一次requestIdleCallback回调再继续构建workInProgress tree
生命周期也被分成了两个阶段:
  1. // 第1阶段 render/reconciliation
  2. componentWillMount
  3. componentWillReceiveProps
  4. shouldComponentUpdate
  5. componentWillUpdate
  6. // 第2阶段 commit
  7. componentDidMount
  8. componentDidUpdate
  9. componentWillUnmount
复制代码
第1阶段的生命周期函数大概会被多次调用,默认以low优先级执行,被高优先级任务打断的话,稍后重新执行。
fiber tree与workInProgress tree
双缓冲技能:指的是workInProgress tree构造完毕,得到的就是新的fiber tree,然后把current指针指向workInProgress tree,由于fiber与workInProgress相互持有引用,旧fiber就作为新fiber更新的预留空间,到达复用fiber实例的目的。
每个fiber上都有个alternate属性,也指向一个fiber,创建workInProgress节点时优先取alternate,没有的话就创建一个
  1. let workInProgress = current.alternate;
  2. if (workInProgress === null) {
  3.   //...
  4.   workInProgress.alternate = current;
  5.   current.alternate = workInProgress;
  6. } else {
  7.   // We already have an alternate.
  8.   // Reset the effect tag.
  9.   workInProgress.effectTag = NoEffect;
  10.   // The effect list is no longer valid.
  11.   workInProgress.nextEffect = null;
  12.   workInProgress.firstEffect = null;
  13.   workInProgress.lastEffect = null;
  14. }
复制代码
这么做的好处:
       
  • 可以或许复用内部对象(fiber)   
  • 节省内存分配、GC的时间开销
fiber 中断 规复
中断:检查当前正在处置处罚的工作单元,生存当前成果(firstEffect, lastEffect),修改tag标志一下,迅速收尾并再开一个requestIdleCallback,下次偶然机再做
断点规复:下次再处置处罚到该工作单元时,看tag是被打断的任务,接着做未完成的部门大概重做
P.S.无论是时间用尽“自然”中断,还是被高优任务粗暴打断,对中断机制来说都一样。

React setState


在代码中调用setState函数之后,React 会将传入的参数对象与组件当前的状态归并,然后触发所谓的调和过程(Reconciliation)。颠末调和过程,React 会以相对高效的方式根据新的状态构建 React 元素树而且着手重新渲染整个UI界面。在 React 得到元素树之后,React 会自动计算出新的树与老树的节点差异,然后根据差异对界面进行最小化重渲染。在差异计算算法中,React 可以或许相对精确地知道哪些位置发生了改变以及应该怎样改变,这就包管了按需更新,而不是全部重新渲染。
setState调用时偶然是同步的(settimeout,自定义dom事件),偶然是异步的(平凡调用)

React 事件机制


React事件是通过事件署理,在最外层的 document上对事件进行统一分发,并没有绑定在真实的 Dom节点上。 而且react内部对原生的Event对象进行了包裹处置处罚。具有与欣赏器原生事件雷同的接口,包括 stopPropagation() 和 preventDefault()。

以上就是react底子知识总结的具体内容,更多关于react底子知识的资料请关注草根技术分享别的相干文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作