响应式系统与 React(下)
这是我参与「第四届青训营」笔记创作活动的第8天
React设计思路
状态归属问题
- 当前价格 属于Root结点！因为要向下传递，这其实不合理，在下面的状态管理库里会讲到这个的解决方法。
- 状态应该归属于两个节点（或多个）向上寻找到的最近共同祖先。
生命周期
- 挂载 -> 状态更新 -> 卸载
React（hooks）的写法
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性
React的实现
JSX 是不符合JS标准的语法
- 将JSX转换为符合JS语法的
返回的JSX改变时，如何更新DOM?
-
返回的JSX本身是类似DOM的一种东西，但不是DOM，DOM操作本身是十分耗费性能的。所以需要将返回的JSX与原来的DOM结构计算一个diff（差别）？但是这个diff算法本身不能太耗时，尽可能小，尽可能短
-
Virtual DOM （虚拟DOM）
- 是一种用于与真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构并可以和DOM建立一一对应的关系
- 赋予了 React 声明式的 API：您告诉 React 希望让 UI 是什么状态，React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。
State/Props更新时， 要重新触发render函数
React的状态管理库
核心思想
- 将状态抽离到UI外部进行统一管理，但是这是会降低组件的复用性，所以这一般出现在业务代码中
- 推荐
状态机
- 收到外部事件后根据当前状态，迁移到下一个状态
- 可能会被很多层级的组件用到的状态适合放到状态管理库
应用级框架科普
Next.js
- 硅谷明星创业公司Vercel的 React开发框架,稳定,开发体验好，支持Unbundled Dev,sWC等,其同样有Serverless一键部署平台帮助开发者快速完成部署。口号是"Let’s Make Web Faster"
Modern.js
- 字节跳动Web Infra团队研发的全栈开发框架,内瓷了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间
Get Started with Blitz
- 无API思想的全栈开发框架,开发过程中无需写API 调用与CRUD逻辑,适合前后端紧密小团队项目
