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