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

这是我参与「第五届青训营 」笔记创作活动的第3天，关于响应式系统和React（1）（2）的知识点总结，包括：React的历史与应用和React的设计思路

———Zy_Thomas

React的历史与应用

应用：

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

历史:

• 2010年 Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的React的设计。
• 2011年 Jordan Walke 创造了FaxJS，也就是后来的React原型:

• 2012年 在Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用, Jordan Walke 基于 FaxJS 的经验开发出了React。
• 2013年 React正式开源，在2013 JSConf上Jordan Walke介绍了这款全新的框架。
• 2014年——今天 生态大爆发，各种围绕React的新工具/新框架开始涌现。

React的设计思路

UI编程痛点:

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

响应式和转换式

• 转换式系统：给定输入求解输出，比如编译器的实现，数值计算等场景
• 响应式系统：监听事件，由消息驱动，需要有一个监控系统去关注事件，并对事件做出响应，更新UI界面

响应式编程：

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

组件化

总结：

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

状态归属问题

思考

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

组件设计

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