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

React的历史与应用

用于前端应用开发，例如Facebook，Instagram，Netfix的网页版

同时可应用于移动原生应用开发，例如Instagram，Discord，Oculus

且可用于Electron进行桌面应用开发

2011年Jordan Walke创建了FaxJS，也就是React的早期原型

2013年JS大会上，Jordan介绍了React，并宣布开源

2014年后各种新框架和新工具开始逐步完善。

React的设计思路

UI编程痛点

状态更新，UI不会自动更新，需要手动调用DOM进行更新

缺少基本代码层面的封装和隔离，代码层面没有组件化

UI之间的数据依赖关系，需要手动维护，如果依赖链路长则会回调

React则解决了以上痛点

响应式和转换式

转换式系统：给定输入求解输出，例如编译器以及数值计算

响应式系统：监听事件-消息驱动执行-监控系统状态变更-UI界面更新 响应式系统代码可组件化，同时可复用和封装

组件化

组件是 组件的组合/原子组件

组件内拥有状态，外部不可见

父组件可将状态传入组件内部

被多个子组件共享的属性属于根节点root 组件内部拥有私有状态 State

组件接受外部的 Props 状态提供复用性

根据当前的 State/Props，返回一个 UI

组件设计

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

虚拟 DOM

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