第六届字节跳动青训营第三课 | 青训营

112 阅读2分钟

一.React的历史与应用

1.应用场景:前端应用开发(Facebook,Instagram),移动原生应用开发(Instagram,Discord,Oculus),结合Electron,进行桌面应用开发
2.历史: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的设计思路

1.UI编程三大痛点
(1)状态更新,UI不会自动更新,需要手动地调用DOM进行更新。
(2)欠缺基本的代码层面的封装和隔离,代码层面没有组件。
(3)UI之间的数据依赖关系,需要手动维护,如果依赖链路长,则会遇到“Callback Hell”。
2.响应式与转换式

转换式系统(编译器,数值计算) 不等于 响应式系统(监控系统,UI界面)

响应式编程
前端UI

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

(1)状态更新,UI自动更新

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

(2)前端代码组件化,可复用,可封装
“欠缺基本的代码层面的封装和隔离,代码层面没有组件化。”
(3)状态之间的互相依赖关系,只需声明即可
“UI之间的数据依赖关系,需要手动维护,如果依赖链路长,则会遇到“Callback Hell”。”
3.组件化
(1)组件是组建的组合/原子组件
(2)组件内拥有状态,外部不可见
(3)父组件可将状态传入组件内部