react的部分考点

1. 对react的理解

react是什么

用于构建用户界面的 JavaScript 库

react能干什么

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

react是如何干的

声明式

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

组件化

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

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

可以使用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，则有可能为了在超时前执行函数而打乱执行顺序。