React 基础
官方资料：React
拓展资料：React技术揭秘 (iamkasong.com)
react hook： 「react进阶」一文吃透react-hooks原理 - 掘金 (juejin.cn)
字节UI：Arco Design - 企业级产品的完整设计和开发解决方案
基础学习知识
React 是使用 js搭建快速响应的大型web 应用程序的首选方法
等待资源加载和大部分情况下浏览器单线程执行是影响web 性能的两大因素
等待资源的优化：
1.React.lazy React.suspense 组件的懒加载，暂停
2.ErrorBoundary 报错组件，错误兜底
浏览器的线程执行: JS执行和UI 执行是不可能进行同时进行的
浏览器计算样式布局，UI 绘制比较慢
1.异步更新
2.时间切片（切分重要的任务）
3.React Fiber
React 的更新流程
调度器
1.维护时间切片 2.与浏览器调度 3.有效级调度
协调器
1.将jsx 变为 Fiber ，Fiber 进行对比 ，确定本次更新的Fiber
渲染器
渲染器用于管理一颗React 树，使其根据平台进行不同的调用
渲染流程如下所示：
setState--> Reconsileer(UpdataeContainer)->（Scheduler）Task列表-->浏览器调度-->优先级调度--> JSX转化为Fiber -->Fiber 树进行对比，确定本次更新的Fiber-->Render 渲染器
构建新的 Fiber 树之后对 每一个节点进行对比
react优点，快速响应Fiber，组件化 复用性强，声明式编程，只需要修改渲染器就可以跨端
react缺点,学习成本比较高
开发技术
开发技术：JSX 编程，React Router， Redux 多组件共享信息 ，复用组件UI hook
React组件操作：
1.通过state 操作视图 Mounte 获取数据更新 Ref包存组件对象 unMount 清空 Ref
2.通过 Ref 来获取 DOM
3.使用 Props 和 redux context 实现组件通讯
4.函数使用 useCallback，值或者计算使用 useMemo ，组件包裹 memo
JSX 编程
react 函数组件（没有生命周期，借助Hook return jsx），react 类组件（继承react.Coponent,有this，生命周期，render方法）函数式组件相较于class 的优点，代码量骤减没有复杂的生命周期，支持自定义的hook，组件和hook 的关系将UI拆分为多个独立的单元，组件就是独立的单元，hook 贴近 内部运行的各种逻辑 effect，state ，context
Hook 的规则和原理
React Hook是React 16.8版本引入的新功能。它们允许您在无需编写类组件的情况下，在函数组件中使用状态和其他React功能。以前，只有类组件才能使用状态和其他React功能，但是现在，使用Hook，您可以在函数组件中使用这些相同的功能，使得功能组件更加强大和灵活。React Hook提供了一些内置的Hook函数，例如useState和useEffect。useState允许您在函数组件中添加本地状态。useEffect允许您在组件更新时运行副作用代码（例如数据获取或DOM更新）。除了这些基本的Hook之外，React社区也提供了许多自定义Hook，可以为您的应用程序提供其他功能和状态。
hook 只用于外层和顶部声明的时候，只能在React 函数中调用Hook自定义hook 必须用 use开头，Hook中的state 是完全隔离的，hook 的本质是一个函数
如何划分组件？
根据 page 里面的不同布局单元进行拆分
组件里面不同的功能模块继续拆分
组件的共享信息： 1.使用 context 和 reducer进行 信息共享 ， 使用hook中的 useContext 来添加 GloabalContext ，Reducer 使用 useReducer 来处理 Context
2.使用reactredux里面的方法
组件优化
减少函数的重复调用， 用memo ，和useMemo 包裹函数体
react-dom 里面的 使用creatPortal 改变组件挂载真实渲染的位置，而不是代码编写的位置，冒泡问题的解决
逻辑的复用，useRequest
React 的状态管理
问题引入： 状态管理为什么不引入window全局变量实现，新版本可以使用hook 来实现功能
1.全局污染，重复的申明
2.直接取值和赋值，数据变更不清晰
3.渲染粒度不可控
4.react 时间管理回溯
状态管理工具的本质：
管理内存的状态 1.共享内存 2.管理状态 3.页面通讯 4.组件通讯 5.刷新
React 的管理工具： 自带的工具props Context ,单向数据流 Redux，Flux 双向流：Mobox ，原子型：
props 用于简单父子，兄弟的组件通讯 context 相当于全局的变量，难以进行数据的变更情况，内部耦合度较高，出现重复更新，context 会出现层层嵌套， 小型项目中的hook 中的Reducer 更加合适
Redux 是 Flux 的进化版本，用于大型的项目
Mobox 与响应式的写法直接修改就可实现
Recoil 原子化的组件管理，弥补context 的缺点，粒度比较细
Zustand 轻量级，用于移动端比较合适
状态管理工具的原理：
使用发布订阅来实现一个状态管理工具
React 路由
前端的演化 ： 静态网站--> 动态网站 --> 前后端分离 -->单页面应用 --> SSR SSG 微前端
静态网站：更新不便利
动态网站: ASP JSP PHP 和前端交互 -->门户网站
前后端分离：AJax 的使用
单页面的应用：webpack，MVVC, webComponnent reat vue 出现 server +后端路由
React-router:分为 BrowserRouter （基于history接口实现）和 HashRouter （基于hash）
history接口实现，变化监听和路由的操作
主要完成路由的匹配和路由参数传递
单页面的优化，应用开发收缩，切割，微前端的处理 分为多个 SPA 应用 ，lazy+ suspens，next/remix 路由申明
