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

49 阅读1分钟

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

01 React的历史与应用

  • 前端应用开发,如Facebook, Instagram,Netflix网页版。
  • 移动原生应用开发,如Instagram, Discord, Oculus。
  • 结合Electron,进行桌面应用开发。

02 React的设计思路

响应式与转换式

转换式系统:给定输入,求解输出

  • 编译器
  • 数值计算

响应式系统:监听事件,消息驱动

  • 监控系统
  • UI界面

组件化

  1. 组件是 组件的组合/原子组件
  2. 组件内拥有状态,外部不可见
  3. 父组件可将状态传入组件内部

组件设计

  1. 组件声明了状态和UI的映射。
  2. 组件有Props/State两种状态。
  3. “组件”可由其他组件拼装而成。

组件代码会是什么样子?

  1. 组件内部拥有私有状态State。
  2. 组件接受外部的Props状态提供复用性。
  3. 根据当前的State/Props,返回一个UI。

04 React的实现

Virtual DOM(虚拟 DOM)

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

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

\