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

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

React历史与应用

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

• 2010年Facebook在其PHP生态引入了组合式组件的思想，启发了后来的React的设计
• 2011年Jordan Walke创造了FaxJS,也就是后来的React原型
• 2012年在Facebook收购Instagram后，该FaxJS项目在内部得到了React。
• 2013年React正式开源
• 2014-今天 生态大爆发，各种围绕React的新工具/新框架开始涌现

React的设计思路

UI编程痛点：

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

响应式系统：

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

前端UI：

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

响应式编程：

1. 状态更新，UI自动更新 （状态更新，UI不会自动更新，需要手动地调用DOM进行更新。）
2. 前端代码组件化，可复用，可封装 (欠缺基本的代码层面的封装和隔离，代码层面没有组件化)
3. 状态之间的相互依赖关系，只需声明即可 （UI之间的数据以来关系，需要手动维护，如果依赖链路长，则会遇到'Callback Hell'）

组件：

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

组件设计：

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

个人总结

初步了解了React的历史与设计思路。