React特性与简介

一、特点
1.声明试
2.组件化
3.跨平台服务
二、哲学
1.浏览器线程执行
（1）JS执行
（2）浏览器计算样式布局
（3）UI绘制
2.Scheduler（调度器）
（1）维护时间切片
（2）与浏览器任务调度
（3）优先级调度
3.Reconciler
（1）将JSX转化为Fiber
（2）Fiber树对比
（3）确定本次更新的Fiber
4.Renderer
（1）渲染器用于管理一颗React树
（2）使其根据底层数据进行不同的调用
三、总结
1.优点
（1）快速响应：Fiber
（2）组件化：复用性强
（3）声明式编程
（4）跨平台：只需要修改渲染器
2.缺点
（1）大型应用需要配套学习状态管理、路由工具
（2）不适合小型应用、需要babel处理

React基础

一、用React开发web应用
1.架构：打开配置：JSX->babel->JS加载优化和错误降级
2.路由：React Router向应用中快速地添加视图和数据流，保持页面与URL间的同步
3.UI：可复用UI->组件->页面，可复用逻辑抽离成hook
4.状态：多页面多组件共享信息redux&context
5.数据：通过定义state操作视图Mount时获取数据更新state Ref保存与视图无直接关系的值unMount前清空Ref
6.通信：props父子组件通信context&redux组件信息共享
7.性能：函数使用useCallback，值或者计算使用useMemo，组件包裹memo
二、组件
1.class组件
（1）继承+构造函数
（2）this
（3）生命周期
（4）render方法
2.函数式组件
（1）没有生命周期
（2）借助Hook
（3）return JSX
3.函数式相较于class的优点
（1）代码量骤减，组件干净清爽
（2）没有复杂的生命周期
（3）支持hook，逻辑复用方便
4.组件和Hook区别
（1）我们将UI拆成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件。可以相当于原子。
（2）hook贴近组件内部运行的各种逻辑概念逻辑，effect、state、context等。hooks更贴切与电子。
三、Hook规则和原理
1.只能在最顶层使用Hook
2.只能在React函数中调用Hook
（1）在react函数中调用Hook中调用
（2）自定义Hook必须以use开头
（3）Hook中的state是完全隔离的

具体场景案例

一、如何划分组件 1.Lyout
（1）Navber
（2）Main Content
（3）Footer
（4）Floating Button
2.Page
（1）Banner
（2）CardGroup
（3）Slider Group
（4）Help Docs
（5）Footer Banner
3.Component
（1）BlockHeader
1）tog
2）title
（2）SlideButton
1）onClick
2）icon:ReactNode
3）animate:boolean
（3）AnimationWrappeer
1）animationName:string
2）animationDuration:number
（4）BlackWrapper
3）backgroupType
4）animate:boolean;
5）theme:"dark"|"light"
（5）SizeText
1）通过className控制
2）封装成组件
3）安装主题包