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

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

一、本堂课重点内容

1. React的历史与应用
2. React的设计思路

二、详细知识点介绍

1.React的历史与应用

1.1 React的历史

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

1.2 React的应用

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

2.React设计思路

2.1 UI编程痛点

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

2.2 响应式与转换式

转换式系统的主要功能是给定输入，求解输出，也可开发编译器和数据计算，而响应式系统的主要功能是监听事件，消息驱动，可开发监控系统和UI界面；二者是有区别的。

2.3 响应式编程

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

2.4 组件化

组件简介

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

组件设计

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

组件代码

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

四、课后个人总结

React在组合式组件的思路上进行创新，使JS框架更为完善，并且拥有诸多优点，克服了原来UI界面的许多缺点，使代码管理更加井井有条。