响应式系统与 React学习｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第10天
1.UI编程/过程式编程痛点
- 状态更新，UI需要手动调用DOM相应接口的更新；
- 没有组件化概念，欠缺代码层的隔离和封装
- UI之间的数据联系需要手动维护
转换式：给你输入，通过处理得到结果输出
响应式：通过事件触发一些行为，执行回调函数改变一些状态，是消息驱动的
2.React
特点
状态更新UI自动更新，前端代码可复用可封装。状态之间相互依赖，只声明即可
组件化
- 组件是组件的组合（由其他组件拼接）或原子组件
- 它内部拥有外部不可见的状态（私有状态）
- 父组件可以传入子组件来控制内部状态的变化（单向数据流，状态不合理的上升问题通过Redux解决，dom怎么更新--返回UI）
- 状态归属：放在两个组件最近的共同组件上
- 生命周期：挂载 更新 卸载
3.React Hooks
Hooks就是调用的react函数，比如useState、useEffect
- useState：传入一个初始值返回一个状态，用户可以调用set函数实现状态的修改
- useEffect：副作用函数，其操作会对其他功能产生影响。传入一个函数和状态的数组（依赖项），函数会在mount时执行
4.react实现
- 命令式编程：手动操作的过程
- 响应式编程：面向结果，只需要关注动作；同时状态改变时会响应并自动更新其他依赖的状态
- 声明式编程：面向结果，只需要关注动作
react的JSX不是JS标准语法，需要进行转义
当JSX变化时更新dom的DIFF算法：（因为遍历的就是这n个节点，所以复杂度为n）
- 同一层节点比较，类型相同的DOM进行更新；
虚拟DOM：一个与真实DOM同步的JS对象，具有和DOM类似的树状结构并且和真实DOM具有一一对应的关系
-
类型不同的DOM进行替换
-
类型相同的组件进行递归比较
状态更新时会重新触发渲染函数 对于与祖先距离很远的节点，传递数据是很费性能且很复杂的。
状态管理库就是将状态抽离到UI外部进行管理
