React简介与特性
Rect特点
-
声明式：声明式编程（英语：Declarative programming）是一种编程范式，与命令式编程相对立。它描述目标的性质，让计算机明白目标，而非流程。声明式编程不用告诉计算机问题领域，从而避免随之而来的副作用。而命令式编程则需要用算法来明确的指出每一步该怎么做。
-
组件化：把复杂系统拆分成多个组件，分离组件边界和责任，便于独立升级和维护。
-
跨平台编写
React基础
影响web性能的两大主要原因
1.等待资源加载时间 2.大部分情况下浏览器单线程执行
代码演示
React更新流程
1.Scheduler（调度器）
- 维护时间切片
- 与浏览器任务调度
- 优先级调度
2.Reconciler（协调器）
- 将JSX转化为Fiber
- Fiber树对比（双缓存）
- 确定本次更新的Fiber
3.Renderer（渲染器）
- 渲染器用于管理一棵React树，使其根据底层平台进行不同的调用
React的优缺点
1.优点：
- 快速响应
- 组件化：复用性强
- 声明式编程
- 跨平台：只需要修改渲染器 2.缺点
- 大型应用需要配套学习
- 不适合小型应用，需要用babel处理
注：Babel 是编写下一代 JavaScript 的编译器。
Rect组件
四个方面概述
-
数据：通过定义state（状态）操作视图Mount（网络挂载）时获取数据更新state，Ref（参数通过引用传递）保存与视图无直接关系的值，unMount前清空Ref
-
通信：props父子组件通信，context&redux组件信息共享
-
ui：数据决定视图，通过Ref获取到DOM
-
性能：函数使用useCallback值或者计算使用useMemo，组件包裹memo
Class组件
- 继承+构造函数
- this
- 生命周期
- render方法
函数式组件
- 没有生命周期
- 借助Hook
- return JSX
Hook
定义
钩子(Hook)，是Windows消息处理机制的一个平台，应用程序可以在上面设置子程以监视指定窗口的某种消息，而且所监视的窗口可以是其他进程所创建的。当消息到达后，在目标窗口处理函数之前处理它。钩子机制允许应用程序截获处理window消息或特定事件。钩子实际上是一个处理消息的程序段，通过系统调用，把它挂入系统。每当特定的消息发出，在没有到达目的窗口前，钩子程序就先捕获该消息，亦即钩子函数先得到控制权。这时钩子函数即可以加工处理（改变）该消息，也可以不作处理而继续传递该消息，还可以强制结束消息的传递。
原理
每一个Hook都有一个与之相关联的指针列表，称之为钩子链表，由系统来维护。这个列表的指针指向指定的，应用程序定义的，被Hook子程调用的回调函数，也就是该钩子的各个处理子程序。当与指定的Hook类型关联的消息发生时，系统就把这个消息传递到Hook子程。一些Hook子程可以只监视消息，或者修改消息，或者停止消息的前进，避免这些消息传递到下一个Hook子程或者目的窗口。最近安装的钩子放在链的开始，而最早安装的钩子放在最后，也就是后加入的先获得控制权。 Windows 并不要求钩子子程的卸载顺序一定得和安装顺序相反。每当有一个钩子被卸载，Windows 便释放其占用的内存，并更新整个Hook链表。如果程序安装了钩子，但是在尚未卸载钩子之前就结束了，那么系统会自动为它做卸载钩子的操作。 钩子子程是一个应用程序定义的回调函数(CALLBACK Function)，不能定义成某个类的成员函数，只能定义为普通的C函数。用以监视系统或某一特定类型的事件，这些事件可以是与某一特定线程关联的，也可以是系统中所有线程的事件。
规则
- 只能在最顶层使用Hook
注：react通过Hook调用的顺序判断哪个state对应哪个useState
- 只能在React函数中调用Hook
- 在React函数组件中或自定义Hook中调用
- 自定义Hook必须以use开头
- Hook中的state是完全隔离的
常用API和HooK
引用：React 简介与特性
标题：字节前端训练营 - React 基础与实践.pdf - 飞书云文档
