这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
上篇文章讲述了React的历史与应用和设计思路，本篇文章将继续讲述React的相关知识。本篇文章重点讲述React的写法，React 实现，React 状态管理库和应用级框架。
一、React的写法
useState是react hooks中最常用且用法最简单的一个hook，它分为值更新和函数式更新。它在函数式组件中更新一个对象必须使用函数式更新，在函数里面返回一个新的对象。
useEffect用于处理组件中的effect，通常用于请求数据，事件处理，订阅等相关操作。
二、React的实现
首先，我们看一下React实现中存在的问题：
- JSX 不符合JS标准，语法
- 返回的JSX 发生改变时，如何更新DOM
- State/Props更新时，要重新触发render函数
接下来我们将解决这些问题，成功实现React。
问题一：JSX 不符合JS标准，语法---转译
问题二：返回的JSX 发生改变时，如何更新DOM---使用虚拟DOM
Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。它赋予了React声明式的APl：您告诉 React希望让U是么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
问题三：State/Props更新时，要重新触发render函数---使用合适的Diff 算法
完美的最小Diff 算法，需要 O(n^3)的复杂度。
牺牲理论最小 Diff，换取时间，得到了O(n)复杂度的算法：Heuristic O(n) Algorithm
三、React状态管理库
核心思想：将状态抽离到UI外部进行统一管理。
下面是一些React状态管理库的推荐。
状态机：当前状态，收到外部事件，迁移到下一个状态。红绿灯就是一个典型的状态机。
四、应用级框架科普
- Next.js：硅谷明星创业公司Vercel的 React开发框架，稳定，开发体验好，支持Unbundled Dev,swc等，其同样有Serverless一键部署平台帮助开发者快速完成部署。口号是“Let's Make webFaster"。
- Modern.js：字节跳动web Infra团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。
- BIitz：无API思想的全栈开发框架,开发过程中无需写API 调用与CRUD逻辑，适合前后端紧密结合的小团队项目。
五、总结
通过今天对React的写法，React 实现，React 状态管理库和应用级框架的学习，我对React有了进一步的了解和学习。对于使用React Hooks，我认为这种写法优势非常大，它可以支持提取和重用跨多个组件通用的有状态逻辑，可以轻松地操作函数组件的状态。这点相比render props和高阶组件优势还是十分大的。
