React原理2022-0528

203 阅读2分钟

第7章 React原理

7-1 React原理-考点串讲

  • 函数式编程
  • vdom 和 diff
  • JSX 本质
  • 合成事件
  • setState batchUpdate
  • 组件渲染课程

7-2 再次回顾不可变值

  • 纯函数
  • 不可变值
  • SCU

7-3 vdom和diff是实现React的核心技术

  • h函数
  • vnode 数据结构

image.png

  • patch函数

diff

  • 只比较同一层级,不跨级比较
  • tag不相同,则直接删掉重建,不再深度比较
  • tag和key,两者相同。则认为是相同节点不再深度比较

7-4 JSX本质是什么

JSX等同于 Vue模板 Vue模板不是html JSX 也不是js

image.png 基本用法 image.png

JSX style image.png 加载组件,组件 2个参数 image.png JSX 事件

image.png JSC list

image.png

image.png

7-5 说一下React的合成事件机制

image.png

image.png image.png

为何要合成事件机制?

  • 更好的兼容性和跨平台
  • 栽在document ,减少内存消耗,避免频繁dom解绑
  • 方便事件的统一管理(事务机制)

7-6 说一下React的batchUpdate机制

image.png

setState是异步还是同步?

  • setState 无所谓同步还是异步
  • 关键看是否命中 batchUppdate
  • 判断 isBatchingUpdates Y是异步,N是同步 image.png

image.png

image.png setTimeout 触发异步,所以isBatchingUpdates 为 false (自定义dom事件) image.png

哪些能命中batchUpdate机制

  • 生命周期(和他调用的函数)
  • React中注册的事件(和他调用的函数)
  • React 可以管理的入口

image.png

7-7 简述React事务机制

image.png

image.png

image.png

7-8 说一下React组件渲染和更新的过程

image.png

image.png

image.png

image.png image.png

7-9 React-fiber如何优化性能

reconciliation (调解) image.png

image.png fiber(纤维) idle(闲置) image.png RequestIdleCallback 简单的说,判断一帧有空闲时间,则去执行某个任务。目的是为了解决当任务需要长时间占用主进程,导致更高优先级任务(如动画或事件任务),无法及时响应,而带来的页面丢帧(卡死)情况。故RequestIdleCallback 定位处理的是: 不重要且不紧急的任务

第8章 React面试真题演练

8-1 React真题演练-1-组件之间如何通讯

image.png

image.png

image.png

image.png

image.png

8-2 React真题演练-2-ajax应该放在哪个生命周期

异步与合并

image.png

纯函数(输入和返回的类型一样)

image.png

react中父子组件的生命周期

image.png

image.png

image.png

8-3 React真题演练-3-组件公共逻辑如何抽离

image.png

image.png

image.png

image.png

image.png

8-4 React真题演练-4-React常见性能优化方式

image.png memo(备忘录) image.png

image.png

image.png

image.png Immutable.js出⾃Facebook,是最流⾏的不可变数据结构的实现之⼀。它实现了完全的持久化数据结构,通过使⽤像 tries这样的先进技术来实现结构共享。所有的更新操作都会返回新的值,但是在内部结构是共享的,来减少内存占⽤(和垃圾回收的失效)。

image.png

8-5 React真题演练-5-React和Vue的区别

image.png

image.png