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

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

今天老师讲了一些关于与React相关的知识点，根据上课内容做了一些简单的笔记。

React的历史与应用

简而言之，2013年React正式开源，JSConf上Jordan Walke介绍React框架，并且从2014年开始到至今，各种围绕React的新工具/新框架开始涌现出来。

React的设计思路

UI编程存在痛点：

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

React则是为了解决以上痛点而出现：

• 响应式系统

  • 1、转换式系统：给定输入求解输出，例如编译器以及数值计算
  • 2、响应式系统：监听事件，消息驱动，监控系统，UI界面

• 组件化：

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

• 状态归属问题

  React响应式编程，一一解决以上UI编程存在的痛点：

• 状态更新，UI自动更新

• 前端代码组件化，可复用，可封装

• 状态之间的互相依赖关系，只需要声明即可

React的生命周期：

组件的生命周期分为三个状态：

• Mounting（挂载）：已插入真实DOM
• Updating（更新）：正在被重新渲染
• Unmounting（卸载）：已移出真实DOM

React的实现

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

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

个人总结

由于一直学习的都是Vue框架，也没有接触过React，这节课老师讲的也很好，之后自己会再深入的学习。