响应式系统和react |青训营笔记

48 阅读2分钟

这是我参加第五届青训营笔记创作活动的第6天,react作用

1、 前端应用开发,例如Facebook, Instagram, Netflix网页版

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

3、 结合electron,进行桌面应用开发。

react设计思路

UI编程痛点

1. UI不会自动更新状态,需要手动

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

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

转换式系统(给定输入求解输出,编译器,数值计算)不等于响应式系统(监听事件,消息驱动,监控系统,UI界面)

响应式系统(前端UI):事件》执行既定的回调》状态变更》UI更新

要求1、状态更新时UI自动更新2、前端代码组件化,可复用,可封装3、状态之间的互相依赖关系,只需声明即可

总结:1、组件是组件的的组合?原子组件2、组件内拥有状态,外部不可见3、父组件可将状态传入组件内部

组件设计:1、组件声明了状态和UI的映射2、组件有Props/State两种状态3、组件可由其他组件拼装而成

Recact的写法

Virtual DOM(虚拟DOM)virtual dom 是一种用于和真实DOM同步,而在JS内存中维护的一个对象,他具有和DOM树类似的树状结构,冰河DOM可以建立一一对应关系

它赋予了react声明式的API:您告诉react希望让UI是什么状态,react就确保DOM匹配该状态,这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。