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

主要内容

• 前端应用开发历程
• 移动原生应用开发
• 结合 Electron 的桌面应用开发

React历史与应用

• 前端应用开发，如Facebook,Instagram,Netflix网页版
• 移动原生应用开发,如Instagram,Discord,Oculus
• 结合Electron，进行桌面应用开发
• 2010年,Facebook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计
• 2011年，Jordan-Walke创造了FaxJS,也就是后来的React原型
• 2012年，在Facebook收购Instagram之后，该FaxJS项目在内部得到使用，Jordan-Walke基于FaxJS的经验，创造了React
• 2013年，React正式开源
• 2014年至今天，生态大爆发，各种围绕React的新工具/新框架涌现

React的设计思路

UI编程的痛点：

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

React响应式编程：

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

组件化：

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

组件设计：

• 组件声明了状态和UI的映射
• 组件有Props/State两种状态
• 组件可由其他组件拼装而成
• 组件内部拥有私有状态State
• 组件接受外部的Props状态提供复用性
• 根据当前的State/Props，返回一个UI

React的实现

• Virtual Dom是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系
• 它赋予了React声明式的API:您告诉React希望让UI是什么状态，React就确保DOM匹配该状态
• 不同类型的元素进行替换
• 同类型的DOM元素进行更新
• 同类型的组件元素进行递归

React状态管理库

核心思想：将状态抽离到UI外部进行统一管理

推荐：

• redux
• xstate
• mobx
• recoil

状态机： 当前状态，收到外部事件，迁移到下一个状态

应用级框架科普

• 硅谷明星创业公司Vercel的React开发框架，稳定，开发体验好
• 现代Web工程体系，字节跳动Web Infra团队研发的全栈开发框架减少很多调研选择工具的时间
• Blitz无API思想额全栈开发框架，适合前后端紧密结合的小团队项目

加油！拒绝摆烂！让我们不负青春！在青训营度过充实的一天！