这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天。
在对React设计思路有一定的了解后，我们继续学习了React两大写法之一的Hooks写法，这个写法也是目前学企界中常用的写法之一，本节课我们学习了React实现层的重要知识，方便我们更好地上手后续的React代码操作。
本节课的重点是代码介绍，Live Code，React的实现基本概要以及React的实现。
代码介绍
Live Code
useState：传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改。
useEffect：传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行。
有“副作用"的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其它的一些事情，比如网络请求，更新DOM, localStorage存储数据等。
Hook使用法则
- 不要在循环，条件或嵌套函数中调用Hook.
React的实现
Problems
- JSX不符合JS标准语法
- 返回的JSX发生改变时,如何更新DOM
- State/Props更新时,要重新触发render函数
Problem1
Problem2
Virtual DOM ( 虚拟DOM)
Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。
它赋予了React声明式的API:您告诉React希望让UI是什么状态，React 就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
How to Diff
更新次数少<-TradeOff->计算速度快
完美的最小Diff算法，需要O(n^3)的复杂度。
牺牲理论最小Diff,换取时间，得到了O(n)复杂度的算法:
Heuristic O(n) Algorithm
| 不同类型的元素 | 替换 |
|---|---|
| 同类型的DOM元素 | 更新 |
| 同类型的组件元素 | 递归 |
React状态管理库
核心思想
将状态抽离到UI外部进行统一管理
状态机
当前状态，收到外部事件，迁移到下一个状态
应用级框架科普
- 硅谷明星创业公司Vercel的React开发框架，稳定，开发体验好，支持Unbundled Dev, SWC等，其同样有Serverless一键部署平台帮助开发者快速完成部署.口号是"Let's Make Web Faster"
- 字节跳动Web Infra团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。
- 无API思想的全栈开发框架，开发过程中无需写API调用与CRUD逻辑，适合前后端紧密结合的小团队项目。
