这是我参与「第四届青训营 」笔记创作活动的第6天
React 的设计思路-组件化
单向数据流
组件设计
- 组件声明了状态和UI的映射
- 组件有Props/State两种状态
- “组件”可由其他组件拼装而成
- 组件内部拥有私有状态State
- 组件接受外部的Props状态提供复用性
- 根据当前的State/Props，返回一个UI
react的实现
Virtual DOM (虚拟DOM)
Virtual DOM是一种用于和真实DOM同步，而在js内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系 它赋予了React声明式的API：您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
React的实现-How to Diff?
完美的最小Diff算法，需要o（n^3）的复杂度 牺牲理论最小Diff，换取时间，得到了o(n)复杂度的算法 Heuristic O(n) Algorithm
- 不同类型的元素：替换
- 同类型的DOM元素：更新
- 同类型的组件元素：递归
React状态管理库-推荐
将状态抽离到UI外部进行统一管理
- redux
- xstate
- mobx
- recoil
React状态管理库-状态机
当前状态，收到外部事件，迁移到下一个状态
应用级框架科普
- NEXT.js 支持Unbundled Dev，SWC等，有Serverless一键部署平台 帮助开发者快速完成部署
- MOOERN.js 全栈开发框架，内置很多开箱即用的能力与最佳事实践，可减少很多调研选择工具的时间
- Blitz 无API思想的全栈开发框架，开发过程无需写API调用与CRUD逻辑，适合前后端紧密结合的中小团队项目。
补充
useState
传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改。
useEffect
传入一个函数和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行。 有“副作用”的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其他的一些事情，比如网路请求，更新DOM，localStorage存储数据等。
