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

146 阅读2分钟

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

React 历史与应用

应用

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

历史

  • 2010年 facebook 在其 php 生态中,引入了 xhp 框架,首次引入了组合式组件的思想,后来启发了 React 的设计
  • 2011年 Jordan Walke 创造了 FaxJS,也就是后来的React原型
    react.webp.jpg
  • 2012年 在 Facebook收购 Instagram 后,该 FaxJS 项目在内部得到使用,Jordan Walke基于 FaxJS 的经验正式创造了 React
  • 2013年 React 正式开源,在2013 JSConf 上 Jordan Walke 介绍了这款全新的框架: React
  • 2014年至今 生态大爆炸,各种围绕 React 的新工具/新框架不断涌现
  • 今天 生态大爆发,各种围绕 React 的新工具/新框架开始涌现 image.png

React设计思路

UI编程痛点

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

响应式与转换式

image.png

image.png

image.png 1. 状态更新,UI自动更新。
“状态更新,UI 不会自动更新,需要手动地调用DOM进行更新。”
2. 前端代码组件化,可复用,可封装。
“欠缺基本的代码层面的封装和隔离,代码层面没有组件化。”
3. 状态之间的相互依赖关系,只需声明即可。
“UI 之间的数据依赖关系,需要手动维护,如果依赖链路长,则会遇到 Callback Hell。”

组件化

组件设计:

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

总结:

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