这是我参与「第四届青训营 」笔记创作活动的的第10天。本节课的主题是【响应式系统与 React】，授课老师为牛岱。
本篇笔记分别对课程中所讲的几个要点进行一些解读，如若有误，欢迎大家在评论区交流，指出不当之处。
0. 前置知识
- 前端基础（JS CSS HTML）
- 基础算法
- DOM相关API操作
1. 正式课程
01. React的历史和运用
1.前端应用开发
2.移动原生应用开发
3.结合Electron进行桌面应用开发
4.3D应用
….
-
2010年，FB引入xhp框架，首次引入组合式组件的思想，启发后来的React设计
-
2011年，React原型FaxJS被开发
- 响应式：状态更新时，UI自动更新
-
2012年，FB收购INS，开始运用FaxJS
-
2013年，React开源（有创始人视频，React is a JS library for building UI）
-
2014-now，React生态大爆发
02. React的设计思路
UI设计痛点
- 状态更新时，UI不自动更新，需手动调用DOM更新
- 代码欠缺组件层面的封装和隔离
- UI数据依赖需要手动维护
转换式系统：输入→输出，编译器，数值计算
响应式系统：监听事件，消息驱动。监控系统。UI界面
事件—>执行回调—>状态变更—>更新UI
DOM是浏览器的渲染，不属于JS
conclusion：
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
状态归属问题：
状态归属于两个节点向上寻找到最近的祖宗节点上
组件
- 内部拥有私有状态State
- 组件接受外部的Props状态提供复用性
- 根据当前的State/Props 返回一个UI
生命周期
- Mounting
- Updating
- Unmounting
03. React（hooks）写法
hooks：现在常用写法
render：组件函数（const APP（（）=》）…）
挂载到mount/update上
useState 传入一个初始值，返回一个状态，和set该状态的函数，用户可以调用该函数来实现状态修改
useEffect(()=>{ 传入一个函数和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set时执行
//有副作用的函数，要传入useEffect 来执行，副作用除了单纯的计算外，还要做其他事情，如网络请求，更新DOM，localStorage等。 })
Hook适用法则：
- 不要在循环，条件或嵌套函数中调用hook
04. React的实现
Problem1：JSX不符合JS标准语法
将JSX转成符合React语法的东西
P2:返回的JSX改变时，如何更新DOM
Virtual DOM（虚拟DOM）
指令：C
声明：
响应：
Diff，虚拟DOM更新到真实DOM
P3：State/Props更新时，要重新触发render函数
05. React状态管理库
核心思想-将状态抽离到UI外部进行统一管理
- redux
- xstate
- mobx
- …
状态机：当前状态收到外部事件，迁移到下一个事件
