在这些内容里面我学会了这些内容
React特点
声明式 组件化 跨平台编写
React是用JavaScript构建快速响应的大型Web应用程序的首选方式之一。它在Facebook和instagram表现优异。
等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因
等待资源加载 1.一次请求太多资源？ 2.网络请求慢？ 3.资源加载失败？ React.Lazy React.Suspense ErrorBoundary
浏览器线程执行 1.JS执行 2.浏览器计算样式布局 3.UI绘制 异步更新 时间切片 ReactFiber
React哲学 lazy&Suspense
React哲学 ErrorBoundary
React哲学 更新流程 1.Scheduler（调度器） 维护时间切片（类似requestldleCallback) 与浏览器任务调度 优先级调度
2.Reconciler（协调器） 将JSX转化为Fiber Fiber树对比（双缓存） 确定本次更新的Fiber
3.Renderer（渲染器） 渲染器用于管理一棵React树 使其根据底层平台进行不同的调用
总结： 优点： 快速响应：Fiber 组件化：复用性强 声明式编程 跨平台：只需修改渲染器
缺点：大型应用需要配套学习 状态管理、路由工具 不适合小型应用，需要用babel处理
用React开发web应用 打包配置：JSX—>babel->JS加载优化和错误降级
可复用UI->组件—>页面 可复用逻辑抽离成hook
React Router向应用中快速地添加试图和数据流。保持页面和URL间的同步
多页面多组件共享信息Redux&context
用React开发web应用——组件 通过定义state操作视图Mount时获取数据更新state Ref保存与视图无直接关系的值unMount前晴空Ref
数据决定视图，通过Ref获取到DOM
props父子组件通信,context&redux组件信息共享
函数使用useCallback值或者计算使用useMemo 组件包裹memo
组件 Class组件 继承+构造函数 this 生命周期 render方法
组件 函数式组件 没有生命周期 借助hook return JSX
组件 函数式相较于Class的优点 代码量骤减，组件干净清爽 没有复杂的生命周期 支持自定义hook，逻辑复用方便
组件和Hook的关系 我们将UI拆成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件。组件相当于原子 hook贴近组件内部运行的各种概念逻辑，effect、state、context等。hooks更贴切于电子
Hook规则&原理 只能在最顶层使用Hook React怎么知道state对应哪个useState 答案是React靠的是Hook调用的顺序
Hook规则&原理 只能在React函数中调用Hook 在React函数组件中或自定义Hook中调用 自定义Hook必须以use开头 Hook中的state是完全隔离的
Hook过期闭包问题 在JS中，函数运行的上下文是由定位的位置决定的，当函数的闭包包住了过期的变量时，就出现了过期闭包的问题
React常见API及作用
React常见Hook及作用
如何划分组件 Layout Navbar Main Content Footer Floating Button
如何划分组件 Page Banner CardGroup SliderGroup Help Docs Footer Banner
如何划分组件 Component 1.BlockHeader tag title
2.BlockWrapper backgroundType animate？：boolean； theme？："dark"|"light"
3.SlideButton onClick(direction,index) icon?:ReactNode animate?:boolean
4.AnimationWrapper animationName?:string animationDuration?:number
5.SizeText 通过className控制 封装成组件 安装主题包
父组件给子组件通信 知道子组件的表现，直接通过props传递即可 不知道具体子组件表现如何？props.children
父组件给子组件通信
子组件给父组件通信 传递信息比如说对象文本等，通过callback 传递方法？父组件需要调用子组件的一些方法？
子组件给父组件通信代码
组件间共享信息
组件间共享信息context&reducer
组件间共享信息react-redux
组件性能优化
组件挂载位置
如何进行逻辑复用
