前言
1.React简介与特性
2.React基础知识
React特性与简介
React是用JavaScript构建快速响应的大型Web应用程序的首选方式之一。它在Facebook和Instagram上表现优秀。
特点
- 声明式
- 组件化
- 跨平台编写
更新流程
Scheduler(调度器)
- 维护时间切片（类似requestldleCallback)
- 与浏览器任务调度
- 优先级调度
Reconciler(协调器)
- 将JSX转化为Fiber
- Fiber树对比（双缓存）
- 确定本次更新的Fiber
Renderer(渲染器)
- 渲染器用于管理一棵React树，
- 使其根据底层平台进行不同的调用。
优点&缺点
优点
- 快速响应：Fiber
- 组件化：复用性强
- 声明式编程
- 跨平台：只需修改渲染器
缺点
- 大型应用需要配套学习状态管理、路由工具
- 不适合小型应用，需要用babel处理
React基础知识
组件
Class组件
- 继承+构造函数
- this
- 生命周期
- render方法
函数式组件
- 没有生命周期
- 借助Hook
- return JSX
函数式相较于Class的优点
- 代码量骤减，组件干净清爽。
- 没有复杂的生命周期。
- 支持自定义hook,逻辑复用方便。
组件和Hook的关系
- 我们将UT拆成多个独立单元，这些单元组合可以构 成多种视图展示，这些独立单元就是组件。组件相 当于原子。
- hook贴近组件内部运行的各种概念逻辑，effect、 state、contexts等。hooks更贴切于电子。
Hook规则&原理
只能在React函数中调用Hook
- 在React函数组件中或自定义Hook中调用
- 自定义Hook必须以use开头
- Hook中的state是完全隔离的
React常见API及作用
React常见Hook及作用
如何划分组件
_Layout
- Navbar
- Main Content
- Footer
- Floating Button
_Page
- Banner
- CardGroup
- Slider Group
- Help Docs
- Footer Banner
_Component
BlockHeader
- tag
- title
BlockWrapper
- backgroundType
- animate?:boolean;
- theme?:"dark""light"
SlideButton
- onClick(direction,index)
- icon?:ReactNode
- animate?:boolean
AnimationWrapper
- animationName?:string
- animationDuration?:number
SizeText
- 通过className控制
- 封装成组件
- 安装主题包
