[ React 学习 | 青训营笔记]

59 阅读2分钟

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

一、React历史与应用

(一)React应用:

1. 前端应用开发,如 Facebook , Instagram , Netflix网页版。

2. 移动原生应用开发,如Instagram , Discord , Oculus。

3. 结合Electron ,进行桌面应用开发。

(二)React历史:

2010年Facebook在其php生态中,引入了xhp框架,首次引入了组合式组件的思想,启发了后来的React的设计。

2011年Jordan Walke创造了FaxJs , 也就是后来的React 原型: Seamless Client Server Rendering

2012年在Facebook l收购Insagam后,该Faxus项目在内部得到使用, Jordan Walke基于FaxJs 的经验,创造了React。

2013年React 正式开源,在2013 JSConf 上Jordan Walke介绍了这款全新的框架: 之后,生态大爆发,各种围绕React的新工具与框架开始涌现

二、React设计思路

1. 从UI编程痛点出发

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

3. 欠缺基本的代码层面的封装和隔离﹐代码层面没有组件化。

4. UI之间的数据依赖关系﹐需要手动维护,如果依赖链路长,则会遇到“Callback Hell”。

三、React响应式编程:

1. 状态更新,uI自动更新。

2. 前端代码组件化,可复用﹐可封装。

3. 状态之间的互相依赖关系﹐只需声明即可。

四、组件化

(一)对组件化的总结

1.组件是组件的组合/原子组件

2.组件内拥有状态,外部不可见

3.父组件可将状态传入组件内部

(二)组件设计

1.组件声明了状态和U的映射。

2.组件有Props/State两种状态。

3.“组件"可由其他组件拼装而成。

(三)组件代码构成

1.组件内部拥有私有状态 State。

2.组件接受外部的Props状态提供复用性。

3.根据当前的State/Props,返回一个U。