React基础与实践
一、React特性与简介
React
用于构建用户界面的JavaScript库
1. React特点
- 声明式（一步步告诉需要做的事）
- 组件化（组件交互，使用JavaScript）
- 跨平台编写
2. React哲学
React是用JavaScript构建快速响应的大型Web应用程序的首选方式之一。
它在Facebook和Instagram上表现优秀
1)等待资源加载
- 一次请求资源过多 ---React.Lazy
- 网络请求慢 ---React.Suspense
- 资源加载失败 ---ErrorBondary
2)浏览器线程执行
- JS执行 ---异步更新
- 浏览器计算样式布局 ---事件切片
- UI绘制 ---React Fiber
1)React更新流程
Scheduler（调度器）
- 维护时间切片（requestldleCallback）
- 与浏览器任务调度
- 优先级调度
Reconciler（协调器）
- 将JSX转化为Fiber
- Fiber树对比（双缓存）
- 确定本次更新的Fiber
Renderer（渲染器）
- 渲染器用于管理一颗渲染树，使其根据底层平台进行不同的调用
3. 优缺点
优点
- 快速响应：Fiber
- 组件化：复用性强
- 声明式编程
- 跨平台：只需要修改渲染器
缺点
- 大型应用需要配套学习：状态管理、路由工具
- 不适合小型应用，需要用babel处理
二、React基础知识温故知新
1. React开发Web应用
React-web
- 架构
- 路由
- UI
- 状态
React-组件
- 数据
- UI
- 通信
- 性能
2. 组件
1)Class组件
- 继承+构造函数
- this
- 生命周期
- render
2)函数式组件
- 没有声明周期
- 借助Hook
- return JSX
3)关于
函数式相较于Class的优点
- 代码量骤减，组件干净清爽
- 没有复杂的生命周期
- 支持自定义hook，逻辑复用方便
组件和Hook的关系
- UI拆分成多个独立单元，单元组件构成多种视图展示，独立单元就是组件，组件相当于原子
- hook贴近组件内部运行的各种概念逻辑，effect、state、context等。hook更贴近于电子
3. Hook规则 & 原理
| 只能在最顶层使用Hook
React依靠Hook的调用顺序判断hook
| 只能在React函数中调用Hook
- 在React函数组件中或自定义Hook中调用
- 自定义Hook必须以use开头
- Hook中的state是完全隔离的
4. Hook过期闭包问题
JS中，函数运行的上下文是由定义的位置决定的，
函数的闭包包住了旧的变量值时，就出现了过期闭包问题
5. React常见API\Hook及其作用
- 常见API
- 常见Hook
三、React实例
1.如何划分组件
1)Layout
2)Page
3)Component
2. 父组件给子组件通信
1)案例
- 知道子组件的表现，直接通过props传递
- 不知道子组件的表现，prop.children
2)代码
3. 子组件给父组件通信
1)案例
- 传递信息比如说对象文本等，通过callback
- 传递方法、父组件需要调用子组件的一些方法
2)代码
4. 组件间共享信息
1)案例
2)context & reducer
3)react-redux
5. 组件性能优化
1)案例
2)代码
6. 组件挂载位置
使用createPortal改变渲染位置
