响应式系统与React | 青训营笔记课堂笔记重点内容： React的发展历史与应用场景； React的设计思想；响

这是我参与[第五届青训营]笔记创作活动的第6天

课堂笔记

本堂课重点内容

React的发展历史与应用场景
React的设计思想
响应式编程/函数式编程的设计思想
其他React生态框架科普

具体内容

React 是一个声明式的、高效的、灵活的 JavaScript 库，用于构建用户界面。它允许我们从称为“组件”的小而独立的代码段编写复杂的 UI。

React 的设计思路

[ UI 编程痛点 ]
用原生的JavaScript写UI会有几个痛点：

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

[响应式与转换式 ]

(编译器可能是最复杂的转换式系统)

响应式系统注重的是有一个什么样的事件，要做出什么样的反应。

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

$\color{grey}{响应式系统：}$ 事件发生之后，执行既定的回调函数，这个函数导致系统内的一些状态发生变更。
具体到 $\color{grey}{前端 UI }$ 其实可以理解为在上述基础之后再添加一个 UI 更新的步骤。
React设计思路(对React的期望):

[ React 设计与实现 ]

$\color{grey}{组件化}$ 组件是组件/原子的组合，其内部拥有的状态外部不可见，父组件可以将状态传入组件内部。

$\color{grey}{状态归属问题}$
如果想要两个组件状态共享，那这个状态应该归属于两个节点向上寻找到最近的祖宗节点。=>React是单向数据流.
$\color{grey}{生命周期}$

React 实现与状态管理库

React的实现过程中会有一点小问题，eg：
jsx不符合JS标准语法
返回的JSX发生改变时，如何更新DOM
State/Props更新时，要重新触发render函数
真实的DOM不是JS中的一个对象而是一个状态。Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。

在小型应用中，单独使用 React 是没什么问题的。但在复杂应用中，容易碰到一些状态管理方面的问题，这时就需要引入状态管理库
常用的状态管理库：核心思想：将状态抽离到UI外部进行统一管理

[状态机]： 有一个当前状态，收到外部事件时迁移到下个状态。

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。