react 简介
react定义：
用于构建用户界面的 Javascript 库。
react主要用于构建UI。可以在React里传递多种类型的参数，如声明代码，帮助开发者渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
react的特点：
- 声明式
- 组件化
- 跨平台编写
react 是用 Javascript构建快速响应的大型 web 应用程序的首选方式之一，它在 Facebook 和 Instgram 上表现优秀。
影响 web 性能的两大主要原因:
1、等待资源加载
- 一次请求太多资源
- 网络请求慢
- 资源加载失败
- React.Lazy
- React.Suspense
- ErrorBoundary
2、大部分情况下浏览器单线程执行
- JS 执行
- 浏览器计算样式布局
- UI 绘制
- 异步更新
- 时间切片
- React Fiber
react 更新流程
Scheduler 调度器
- 维护时间切片
- 与浏览器任务调度
- 优先级调度
Reconciler 协调器
- 将 JSX 转化为 Fiber
- Fiber 树对比（双缓存）
- 确定本次更新的 Fiber
Renderer 渲染器
用于管理一棵 react 树，使其根据底层平台进行不同的调用
- 优点
- 快速响应：Fiber
- 组件化：复用性强
- 声明式编程
- 跨平台：只需要修改渲染器
- 缺点
- 大型应用需要配套学学习（状态管理、路由工具）
- 不适合小型应用，需要用 babel 处理
react 基础
1. 用 React 开发 web 应用
架构：打包配置，JSX、babel、JS 加载优化和错误降级
路由：react Router 向应用中快速的添加视图和数据流，保持页面与 URL 间的同步
UI：可复用 UI、组建、页面，可复用逻辑抽离成 hook
状态：多页面多组件共享信息 redux & context
2. 用 React 开发 web 应用_组件
数据：通过定义 state 操作视图 Mount 时获取数据更新 state，Ref 保存与视图无直接关系的值unMount 前清空 Ref 通信：props 父子组件通信，context & redux 组件信息共享 UI：数据决定视图，通过 Ref 获取 DOM 性能：函数使用 useCallback，值或者计算使用 useMemo，组件包裹 memo
3. 组件
Class 组件：
- 继承+构造函数
- this
- 生命周期
- render 方法
函数式组件：
- 没有生命周期
- 借助 hook
- return JSX
函数式的优点（较于Class）：
- 代码量骤减，组件干净清爽
- 没有复杂的生命周期
- 支持自定义hook，逻辑复用复杂
组件和 hook 的关系：
- 将 UI 拆分成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件，组件相当于原子
- hook 贴近组件内部运行的各种概念逻辑，effect、state、context 等，hook 更接近于电子
4. hook 规则和原理
a. 只能在最顶层使用 hook（通过 hook 调用的顺序，知道哪个 state 对应 哪个 useState）
b. 只能在 react 函数中调用 hook，在 react 函数组件中，或自定义 hook 中调用，自定义 hook 必须以 use 开头，hook 中 state 是完全隔离的
几个重要概念理解
模块与组件
1. 模块:
- 理解: 向外提供特定功能的js程序, 一般就是一个js文件
- 为什么: js代码更多更复杂
- 作用: 复用js, 简化js的编写, 提高js运行效率
2. 组件:
- 理解: 用来实现特定界面功能效果的代码集合(html/css/js/img)
- 为什么: 一个界面的功能太复杂了
- 作用: 复用编码, 简化项目界面编码, 提高运行效率
模块化与组件化
1. 模块化:
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
2. 组件化:
当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用
