响应式系统与React | 青训营笔记

43 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第9天

1)React历史与应用

  1. 历史
  • 2010年 Facebook在其php生态中,引入xhp框架,首次引入了组合式组件的思想,启发了后来React的设计
  • 2011年 Jordan Walke 创造了 FaxJS,也是后来React的原型
  • 2012年 Facebook收购Instagram后,该FaxJS项目在内部得到使用
  • 2013年 React正式开源
  • 2014年 生态大爆发,各种围绕React的工具开始涌现
  1. 应用
  • 前端应用开发
  • 移动原生应用开发
  • 结合Electron,进行桌面应用开发

2)React的设计思路

  1. UI编程痛点
  • 状态更新,UIUI不会自动更新,需要手动的调用DOM进行更新
  • 欠缺基本的代码层面的封装和隔离,代码层面没有组件化
  • UI之间的数据依赖关系,需要手动维护,如果依赖链路长,则会遇到“Callback Hell”
  1. 响应式与转换式

image.png

  1. 响应式编程

image.png

  • 状态更新,UI自动更新
  • 前端代码组件化,可复用,可封装
  • 状态之间相互依赖关系,只需声明即可
  1. 组件设计
  • 组件声明了状态和UI的映射
  • 组件有Props/State两种状态
  • “组件”可由其他组件拼装而成

image.png

3)React写法

image.png

image.png

4)React的实现

  1. Problems
  • JSX不符合JS标准语法
  • 返回的JSX发生改变时, 如何更新DOM
  • State/Props更新时, 要重新触发render函数

image.png

  • Virtual DOM (虚拟DOM)

Virtual DOM是一种用于和真实DOM同步, 而在JS内存中维护的一个对象, 它具有和DOM类似的树状结构, 并和DOM可以建立一一对应的关系.

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

5)React状态管理库

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

image.png

image.png