React | 青训营

282 阅读1分钟

React历史与应用

image.png

  • 2010年 Facebook在其php生态中,引入了xhp框架,首次引入了组合式组件的思想,启发了后来的React的设计。
  • 2011年 Jordan Walke创造了FaxJS,也就是后来的React原型: image.png
  • 2012年 在Facebook收购Instagram后,该FaxJS项目在内部得到使用,Jordan Walke基于 FaxJS的经验,创造了React。
  • 2013年 React正式开源,在2013 JSConf上Jordan Wlake介绍这款全新的框架:

image.png

React的设计思路

原先的JavaScript的痛点:

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

响应式编程

  • 状态更新 UI自动更新
  • 前端代码组件化 可复用 可封装
  • 状态之间的互相依赖关系 只需声明即可

组件化 image.png

组件设计 image.png

React的实现

  1. JSX不符合JS标准语法 image.png
  2. 返回的JSX发生改变时如何更新DOM树

Virual DOM (虚拟DOM) 与真实DOM同步,而在JS内存中维护的一个对象,具有和DOM类似的树状结构,可以和DOM建立一一对应的关系

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

如何diff? image.png

image.png 4. State/Props更新时,要重新触发render函数

React状态管理库

核心思想

image.png

推荐

image.png

状态机

image.png

Modern.js/Reduck

应用级框架

image.png