React | 青训营

100 阅读2分钟

React历史与应用

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

React的设计思路

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

总结:

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

组件设计:

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

组件化

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

Virtual DOM(虚拟DOM)

Virtual DOM是一种用于和真实DOM同步,而在JS内存中维护的一个对象,它具有和DOM类似的树状结构,并和DOM可以建立一一对应的关系。 它赋予了React声明式的API:您告诉React希望让UI是什么状态,React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

应用级框架

  1. NEXT.JS 硅谷明星创业公司Vercel的React开发框架,稳定,开发体验好,支持Unbundied Dev,SWC等,其同样有Serverless一键部署平台帮助开发者快速完成部署。
  2. MCDERN.JS 字节跳动Web Infa团队研发的全栈开发框架,内置了很多开箱即用的能力与最佳实践,可以减少很多调研选择工具的时间。
  3. Blitz 无API思想的全栈开发框架,开发过程中无需写API调用与CRUD逻辑,适合前后端紧密结合的小团队项目。

感想

good