这是我参与「第四届青训营 」笔记创作活动的第二天
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 介绍了这款全新的框架: React
- 2014年至今 生态大爆炸,各种围绕 React 的新工具/新框架不断涌现
- 今天 生态大爆发,各种围绕 React 的新工具/新框架开始涌现
React设计思路
UI编程痛点
- 状态更新,UI 不会自动更新,需要手动地调用DOM进行更新。
- 欠缺基本的代码层面的封装和隔离,代码层面没有组件化。
- UI 之间的数据依赖关系,需要手动维护,如果依赖链路长,则会遇到“Callback Hell”
响应式与转换式
1. 状态更新,UI自动更新。
“状态更新,UI 不会自动更新,需要手动地调用DOM进行更新。”
2. 前端代码组件化,可复用,可封装。
“欠缺基本的代码层面的封装和隔离,代码层面没有组件化。”
3. 状态之间的相互依赖关系,只需声明即可。
“UI 之间的数据依赖关系,需要手动维护,如果依赖链路长,则会遇到 Callback Hell。”
组件化
组件设计:
- 组件声明了状态和 UI 的映射
- 组件有Props/State 两种状态
- “组件”可由其他组件拼装而成
总结:
- 组件是 组件的组合/原子组件
- 组件内拥有状态,外部不可见
- 父组件可将状态传入组件内部