这是我参与「第四届青训营 」笔记创作活动的第9天！今天学习《React与响应式》，之前没有接触过React，只在掘金上阅读过一些相关的文章，感觉有点难度，需要知识的体系学习，以下是今天整理的笔记。

前置知识

• HTML、JS、CSS基础
• 基础的数据结构/算法知识，如二叉树，深度遍历算法等等
• 要学会使用浏览器提供的DOM API来修改DOM，更新UI

React的相关历史与运用

• 前端应用开发，如Facebook、Instagram、Netflix网页版；
• 移动原生应用开发，如Instagram、Discord、Oculus；
• 结合Electron，进行桌面应用开发

React的设计思路

UI编程痛点

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

响应式与转换式

• 转换式系统：给定【输入】，求解【输出】（编译器 数值计算）
• 响应式系统：监听事件，消息驱动，监控系统 UI界面

响应式编程

响应式系统

graph TD
事件 --> 执行既定的回调 --> 状态变更

前端UI

graph TD
事件 --> 执行既定的回调 --> 状态变更 --> UI更新

• 状态更新，UI自动更新。状态更新，UI不会自动更新，需要手动调用DOM进行更新
• 前端代码组件化，可变用，可封装。欠缺基本的代码层面的封装和隔离，代码层面没有组件化
• 状态之间的互相依赖关系，只需声明即可。UI之间的数据依赖关系，需要手动维护

组件化

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

状态归属问题

• React是单向数据流

组件设计

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

以上为前半部分知识点，后面为React写法，此处不做详细说明，通过前面的学习和理解再加以领悟和运用。其实这个对我来说还是有点难度，还是需要多多理解并练习加以巩固。