响应式系统与 React | 青训营

84 阅读2分钟

今天了解到了react的方方面面,整体内容不算太难,以此为基础,进行更高阶的学习

React历史与应用

1.前端应用开发 2.移动原生应用开发 3.结合Electron,进行桌面应用开发

2010年:facebook在其php系统中,引入了xhp框架,首次引入了组合式组件的思想,启发了后来的react的设计

2011年:Jordan Walke创造了FaxJS,也就是后来的react原型

2012年:在facebook收购instagram后,Jordan Walke基于FaxJS的经验,创造了react

2013年: react正式开源

React 的设计思路

ui编程的痛点:

1.状态更新,UI不会自动更新 需要手动调用DOM进行更新

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

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

转换式系统≠响应式系统
响应式编程

1.状态更新 UI自动更新

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

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

组件化总结:
  1. 组件是组件的组合/原子组件
  2. 组件内拥有状态,外部不可见
  3. 父组件可将状态传入内部组件 父组件和组件联通
组件化设计

1.组件声明了UI的映射

2.组件有两种状态

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

响应式编程

image.png

React(hooks)的写法

image.png

image.png

React的实现

1.JSX不符合JS标准语法

image.png

2.返回的JSX发生改变时,

Virtual DOM

image.png

React状态管理

将状态抽离到UI外部进行统一管理

当前状态,收到外部事件,迁移到下一个状态

应用框架科普

image.png