响应式系统与 React(上)

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

React的历史与应用

历史

• 2010年 Facebook 在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计。

• 2011年Jordan Walke创造了FaxJS，也就是后来的React原型

  • 既可以在客户端渲染也可以在服务端渲染
  • 响应式，当状态变更时，UI会自动更新
  • 性能好，快速渲染
  • 高度封装组件，函数式声明

• 2013年React 正式开源，在2013 JSConf 上 Jordan Walke介绍了这款全新的框架：React

• 2014年 - 今天生态大爆发，各种围绕React的新工具/新框架开始涌现

应用

• 前端应用开发

  • eg:Facebook，Instagram，Netflix网页版

• 移动原生应用开发

  • eg:Instagram，Discord，Oculus

• 结合Electron，进行桌面应用开发

React设计思路

UI编程痛点

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

响应式与转换式

• 转换式系统：给定输入求解输出

  • 如编译器、数值计算

• 响应式系统：监听事件，消息驱动

  • 如监控系统、UI界面

响应式编程和组件化

• 组件化

  • 组件一个是 原子组件/或组件的组合
  • 组件内部拥有状态，外部不可见
  • 父组件可将状态传入组件内部，来控制子组件的运转

• 组件设计

  • 组件声明了状态和UI的映射

  • 组件有Props（外部）/State（内部）两种属性

    • Props接受父组件传入的状态
    • State是内部的属性

  • 可被其他组件组成

• 提醒

  • React是单向数据流，永远是只有父组件给子组件传东西，但这并不代表子组件不能改变父组件的状态
  • 通过状态管理库解决状态不合理上升的问题