React特点
- 声明式
- 组件化
- 跨平台编写
React 哲学（Thinking In React）
React是用JavaScript构建快速响应的大型Web应用程序的首选方式之一。它在Facebook和Instagram上表现优秀。
等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。
等待资源加载
- 一次请求太多资源
- 网络请求满
- 资源加载失败
浏览器线程执行
- JS执行
- 浏览器计算样式布局
- UI绘制
更新流程
- Scheduler（调度器）
- 维护时间切片
- 与浏览器任务调度
- 优先级调度
- Reconciler（协调器）
- 将JSX转化为Fiber
- Fiber树对比（双缓存）
- 确定本次更新的Fiber
- Renderer（渲染器）
- 渲染器用于管理一颗React树
- 使其根据底层平台进行不同的调用
优缺点
- 优点
- 快速响应：Fiber
- 组件化：复用性强
- 声明式编程
- 跨平台：只需修改渲染器
- 缺点
- 大型应用需要配套学习状态管理、路由工具
- 不适合小型应用，需要用babel处理
用React开发web应用
- 架构
- 打包配饰是JSX -> babel -> JS
- 加载优化和错误降级
- 路由：React Router向应用中快速地添加视图和数据流，保持页面与URL间的同步
- 状态
- 多页面多组件共享信息；
- redux&context
- UI
- 可复用UI -> 组件 -> 页面
- 可复用逻辑抽离成hook
用Recat开发web应用_组件
- 数据
- 通过定义state操作视图
- Mount时获取数据更新state
- Ref保存与视图无直接关系的值
- unMount前情况Ref
- 通信
- props父子组件通信
- context&redux组件信息共享
- 性能
- 函数使用useCallback
- 值或计算使用useMemo
- 组件包裹memo
- UI
- 数据决定视图
- 通过Ref获取到DOM
组件
- Class组件
- 继承+构造函数
- this
- 生命周期
- render方法
- 函数式组件
- 没有生命周期
- 借助Hook
- return JSX
函数式相较于Class的优点
- 代码量骤减，组件干净清爽
- 没有复杂的生命周期
- 支持自定义hook，逻辑复用方便
组件和Hook的关系
- 我们将UI拆成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件。组件相当于原子。
- hook贴近组件内部运行的各种概念逻辑，effect、state、context等。hooks更贴切于电子。
