？what is React？
是一个用于构建用户界面的 JavaScript 库。
- 是一个将数据渲染为 HTML 视图的开源 JS 库
- 它遵循基于组件的方法，有助于构建可重用的 UI 组件
- 它用于开发复杂的交互式的 web 和移动 UI
1.React的特点
1. 声明式编码
2. 组件化编码
3. React Native 编写原生应用
4. 高效（优秀的Diffing算法）
2.React高效的原因
1. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
2. DOM Diffing算法, 最小化页面重绘。
3.模块化与组件化
(1) 模块
-
理解：向外提供特定功能的js程序, 一般就是一个js文件
-
原因：随着业务逻辑增加，代码越来越多且复杂。
-
作用：复用js, 简化js的编写, 提高js运行效率
(2) 组件
-
理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
-
作用：复用编码, 简化项目编码, 提高运行效率
(3) 模块化
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
(4)组件化
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
4.更新流程
Scheduler (调度器)
- 维护时间切片(类似requestldleCallback)
- 与浏览器任务调度
- 优先级调度
Reconciler(协调器)
- 将JS×转化为Fiber
- Fiber树对比(双缓存)
- 确定本次更新的Fiber
Renderer （渲染器)
- 渲染器用于管理一棵 React树，
- 使其根据底层平台进行不同的调用。
5.组件三大属性
（1）state
state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)； 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
（2）props
每个组件对象都会有props(properties的简写)属性； 组件标签的所有属性都保存在props中
（3）refs
组件内的标签可以定义ref属性来标识自己
6.Hook
Hooks 的规则和原理：
（1） 只能在函数组件顶层使用 Hook：Hooks 只能在 React 函数组件的顶层调用，不能在循环、条件语句或嵌套函数中使用。这是因为 React 需要使用 Hook 的调用顺序来确定每个 Hook 的状态和引用。
（2） 只能在 React 函数组件或自定义 Hook 中使用 Hook：Hooks 只能在 React 函数组件或自定义 Hook 中使用，不能在普通的 JavaScript 函数中使用。
（3） Hook 必须按照相同的顺序调用：React 需要按照相同的顺序调用所有的 Hook。这是为了确保每个 Hook 对应的状态和引用是一致的，使得 React 能够正确地追踪和更新组件的状态。
（4）只能在 React 的函数组件中使用特定的 Hooks：React 提供了一些特定的 Hooks，例如 useState、useEffect、useContext 等。这些 Hooks 都有特定的用途和规则，只能在特定的上下文中使用。
补充：Hooks 的原理基于两个主要概念：状态钩子（State Hook）和副作用钩子（Effect Hook）。
（1）状态钩子（State Hook）：useState 是 React 提供的一个 Hook，用于在函数组件中添加和管理状态。它返回一个状态值和一个更新该状态值的函数。当组件渲染时，useState 会返回当前状态的值，并且在状态发生改变时，会触发组件的重新渲染。
（2）副作用钩子（Effect Hook）：useEffect 是 React 提供的另一个 Hook，用于处理副作用操作，例如数据获取、订阅事件等。useEffect 接收一个回调函数和一个依赖数组作为参数。当组件渲染时，useEffect 会执行回调函数，并在依赖项发生改变时重新执行。它可以模拟类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 等生命周期方法的功能。
通过使用这些钩子，开发者可以在函数组件中管理状态、处理副作用操作，并实现与类组件相似的功能。Hooks 的设计原理使得函数组件更加灵活、易于理解和测试，同时也提高了代码的重用性和可维护性。
