react的部分考点

1. 对react的理解

react是什么

用于构建用户界面的 JavaScript 库

react能干什么

可以通过组件化的方式构建 快速响应的大型Web应用程序

react是如何干的

1. 声明式

• 声明式 使用声明式的编写用户界面，代码可以方便调试
• 声明式渲染和命令式渲染
  • 命令式渲染 命令我们的程序去做什么，程序就会跟着命令一步一步执行（jquery）
  • 声明式渲染 我们只需要告诉程序我们需要什么效果，其他的交给程序来做。(vue,react)

2. 组件化

• 组件化 把页面分为一个个组件，方便视图的拆分和复用，还可以做到高内聚、低耦合（架构设计时的内聚高低是指，设计某个模块或者关注点时，模块或关注点内部的一系列相关功能的相关程度的高低。低耦合的定义：低耦合是用来度量模块与模块直接的依赖关系）

3. 一次学习，随处编写 （跨端开发）

• 可以使用React开发web，Android,IOS,VR和命令式程序
• ReactNative 使用React 来创建 Android和iOS的原生引用
• React 360是一个创建3D和VR用户交互的框架。

React干的怎么样

优点

• 开发团队和社区强大
• 一次学习，随处编写
• API比较简洁
  缺点
• 没有官方系统解决方案，选型成本高（比如vue全家桶， 需要自己选择）
• 过于灵活、不容易写出高质量的应用

2. react 为什么要引入jsx

jsx是什么

• jsx 是一个JavaScript 的语法扩展。 JSX 可以很好的描述UI应该呈现出它应有交互的本质形式。
• jsx 其实是 React.createElement的语法糖

react 想要实现的目的

• 实现声明式
• 代码结果需要非常清晰和简洁，可读性强
• 结构、样式和事件等实现高内聚低耦合，方便复用和组合
• 不引入新的概念和语法，只写JavaScript

为什么jsx最好

• vue.js使用了基于HTML的模板语法，运行开发者声明式地将DOM绑定至底层Vue实例的数据
• 引入了太多概念，比如Angular引入了控制器、作用域、服务等概念。

jsx的工作原理

• AST 抽象语法树是源代码 语法 结构的一种抽象表示。 它以树状形式表现编程语法的语法结构，树上的每个节点都表示源代码中的一种结构。

*babel工作流

image.png

使用虚拟DOM的优缺点

优点

• 处理了浏览器的兼容问题，避免用户操作真实DOM。
• 内容经过JSX处理，可以防范XSS攻击。
• 容易实现跨平台开发应用
• 更新时可以实现差异化更新，减少更新DOM的操作。

缺点

• 虚拟DOM需要消耗额外的内存
• 首次渲染其实并不一定会更快

函数组件和内组件的区别

相同点

• 它们都可以接受属性并返回React元素

不同点

• 编程思想不同： 类组件需要创建实例，基于面向对象的方式编程。而函数组件不需要创建实例，接受输入，返回输出，基于函数式编程思想。
• 内存占用： 内组件需要创建并保存实例，会占用一定内存。函数组件不需要创建实例，可以节约内存。
• 捕获特性： 函数组件具有值捕获特性（值捕获： 引用中的变量指向老的值，不会指向新的值。 比如类组件中setTimeout中console.log() state会指向新的值）
• 可测试性： 函数式组件便于编写单元测试
• 状态： 类组建有自己的实例，可以定义状态，而且可以修改状态更新组件。函数式组件以前没有状态，现在可以通过使用useState使用状态
• 生命周期： 类组件有自己完整的生命周期。函数式组件没有生命周期，通过useEffect实现类似生命周期
• 逻辑复用： 类组件通过继承实现逻辑的复用。但是官方推荐组件优于继承。 函数式组件可以通过指定用Hooks实现逻辑复用。
• 跳过更新： 类组件通过 shouldComponentUpdate(返回true更新，返回false不更新) 和 PureComponent(浅比较，重写了shouldComponentUpdate)来跳过更新，函数式组件可以使用React.memo来跳过更新

React中的渲染流程

设计理念

• 跨平台渲染==》虚拟DOM
• 快速响应==》异步可中断+增量更新

性能瓶颈

• js执行任务时间过长
  • 浏览器刷新频率为60Hz，16.6毫秒渲染一次，而JS线程和渲染线程是互斥的，所以如果JS线程执行时间超过16.6ms的话，会导致掉帧，卡顿， 解决方案是React利用空闲的时间进行更新，不影响渲染。
  • 把一个耗时的任务拆分为一个个小任务，分部在每一帧里的方式叫做时间切片。

帧

• 每个帧的开头包括样式计算、布局和绘制
• JavaScript 执行JavaScript引擎和渲染引擎在同一个渲染线程，GUI渲染和JavaScript执行两者互斥

• 如果某个任务执行时间过长，浏览器会推迟渲染

  
  
  image.png

通过上图可看到，一帧内需要完成如下六个步骤的任务：

• 处理用户的交互
• JS 解析执行
• 帧开始。窗口尺寸变更，页面滚去等的处理
• requestAnimationFrame(rAF)
• 布局
• 绘制

上面六个步骤完成后没超过 16 ms，说明时间有富余，此时就会执行 requestIdleCallback 里注册的任务

window.requestIdleCallback()方法将在浏览器的空闲时段内调用的函数排队。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间timeout，则有可能为了在超时前执行函数而打乱执行顺序。

image.png

从上图也可看出，和requestAnimationFrame 每一帧必定会执行不同，requestIdleCallback 是捡浏览器空闲来执行任务。

如此一来，假如浏览器一直处于非常忙碌的状态，requestIdleCallback 注册的任务有可能永远不会执行。此时可通过设置 timeout （见下面 API 介绍）来保证执行。

var handle = window.requestIdleCallback(callback[, options])

• callback：回调，即空闲时需要执行的任务，该回调函数接收一个
  IdleDeadline对象作为入参。其中IdleDeadline对象包含：
  • didTimeout，布尔值，表示任务是否超时，结合 timeRemaining 使用。
  • timeRemaining()，表示当前帧剩余的时间，也可理解为留给任务的时间还有多少。
• options：目前 options 只有一个参数
  • timeout。表示超过这个时间后，如果任务还没执行，则强制执行，不必等待空闲。

React16+的渲染流程

• scheduler选择搞优先级的任务进入reconciler
• reconciler 计算变更的内容
• react-dom 把变更的内容渲染到页面上

fiber

• 我们可以通过某些调度策略合理分配CPU资源，从而提高用户的响应速度
• 通过fiber架构，让自己的调和过程变成可中断。适时地让出CPU执行权

fiber 是一个执行单元

• fiber是一个执行单元，每次执行完一个执行单元，React会检查现在还剩多少时间， 如果没有时间就会将控制权让出去

  
  
  image.png

fiber也是一种数据结构 https://www.jianshu.com/p/ed14378d8867

• React 目前的做法是使用链表， 每个virtualDOM节点内部标识一个fiber
• 从顶点开始遍历
• 依次遍历 儿子=》兄弟=》叔叔
• 最后到顶点没有父节点 结束遍历