这是我参与「第四届青训营」笔记创作活动的第7天

1.React 的历史与应用

React的历史

2010年Faceok在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计。
2011年Jordan Walke创造了FaxJS，也就是后来的Reaet原型:
2012年在Facebook收购Instagram后，该?aJS项目在内部得到使用，Jerdan Walke基于ra出38的经验，创造了Reacto
2013年React 正式开源，在2013 JSConf 上 Jordan Walke介绍了这款全新的框架
2014年-今天生态大爆发,各种围绕React的新工具/新框架开始涌现

React的应用

前端应用开发，如Facebook，Instagram，Netflix网页版。
移动原生应用开发，如Instagram，Discord，Oculus。
结合Electron，进行桌面应用开发。

2.React 的设计思路

UI编程痛点

状态更新，UI不会自动更新,需要手动地调用DOM进行更新。
欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到"Callback Hell"。

响应式与转换式

响应式系统

graph TD
事件 --> 执行既定的回调 --> 状态变更

响应式编程

前端UI

graph TD
事件 --> 执行既定的回调 --> 状态变更 --> UI更新

状态更新,UI自动更新。

“状态更新，UI不会自动更新,需要手动地调用DOM进行更新。”

前端代码组件化,可复用,可封装。

“欠缺基本的代码层面的封装和隔离，代码层面没有组件化。”

状态之间的互相依赖关系，只需声明即可。

“UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到"Callback Hell"。”

组件化

总结：

组件是组件的组合/原子组件
组件内拥有状态，外部不可见
父组件可将状态传入组件内部

状态归属问题

状态归属于两个节点向上寻找到最近的祖宗节点。

React是单向数据流，还是双向数据流?

单向数据流，永远都是父组件给子组件传递东西。

如何解决状态不合理上升的问题?
组件的状态改变后，如何更新DOM?

组件化

组件设计

组件声明了状态和U的映射。
组件有Props/State 两种状态。
“组件”可由其他组件拼装而成。

组件代码特性：

组件内部拥有私有状态State。
组件接受外部的Props状态提供复用性。
根据当前的 State/Props,返回一个UI。

生命周期

3.React (hooks)的写法

useState

传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改。

useEffect

传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行。

有"副作用"的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其它的一些事情，比如网络请求，更新DOM，localStorage存储数据等。

Hook使用法则 不要在循环，条件或嵌套函数中调用Hook。

4.React的实现

Problems

JSX不符合JS标准语法

转译：

返回的JSX发生改变时，如何更新DOM

virtual DOM(虚拟DOM)

Virtual DOM是一种用于和真实DOM同步,而在S内存中维护的一个对象,它具有和DOM类似的树状结构,并和DOM可以建立——对应的关系。

它赋予了React声明式的API:您告诉 React希望让U是什么状态,React就确保 DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

完美的最小Diff算法,需要O(n^3)的复杂度。

牺牲理论最小Diff，换取时间，得到了○(n)复杂度的算法: Heuristic O(n) Algorithm


不同类型的元素	替换
同类型的DOM元素	更新
同类型的组件元素	递归

State/Props更新时，要新触发render函数

5.React状态管理库

6.应用级框架科普

1.NEXT.js

硅谷明星创业公司Vercel的React开发框架。稳定，开发体验好，支持Unbundled Dev、SWC等，其同样有Serverless平台帮助开发者快送完成部署,口号是“Let's Make Web Faster”

2.MODERN.js

字节跳动wab Infra团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间

03.Blitz

无API思想的全栈开发框架,开发过程中无需写API调用与CRUD逻辑，适合前后端紧密结合的小团队项目

响应式系统与React | 青训营笔记