这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天

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

本堂课重点内容：

1. React历史与应用
2. React的设计思路
3. 虚拟DOM

1.React历史与应用

• 2010年 Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的 React 的设计。
• 2011年 Jordan Walke 创造了 FaxJS，也就是后来的 React 原型
• 2012年 Jordan Walke 创造了 FaxJS，也就是后来的 React 原型
• 2014年 生态大爆发，各种围绕React的新工具/新框架开始涌现

2.React的设计思路

UI编程痛点

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

改良

• 状态更新，UI自动更新。
• 前端代码组件化，可复用，可封装。
• 状态之间的互相依赖关系，只需声明即可。

组件化

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

状态归属思考题

1. React 是单向数据流，还是双向数据流？
2. 如何解决状态不合理上升的问题?
3. 组件的状态改变后，如何更新 DOM?

组件设计

1. 组件声明了状态和 UI 的映射。
2. 组件有 Props/State 两种状态。
3. 组件”可由其他组件拼装而成。

3.虚拟DOM

概念：Virtual DOM 是一种用于和真实 DOM 同步，而在JS 内存中维护的一个对象，它具有和 DOM 类似的树状结构，并和DOM 可以建立一一对应的关系。
作用：它赋予了 React 声明式的 API: 您告诉 React 希望让 UI 是什么状态，React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。