这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天
以下为今日课上笔记内容
前置知识
1.HTML，JS，CSS基础。
2.基础的数据结构/算法知识，如二叉树，深度遍历等。
3.会使用浏览器提供的DOM API 来修改 DOM更新 UI
一. React 历史与应用
应用：
历史：
二.React 的设计思路
- UI 编程痛点
1）状态更新，UI 不会自动更新，需要手动地调用 DOM进行更新。
2）欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
3）UI 之间的数据依赖关系需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。
2.响应式与转换式
响应式系统
事件————执行既定的回调————状态变更
React 的设计与实现 1.响应式编程
前端 UI
事件————执行既定的回调————状态变更————UI 更新
1）状态更新，UI自动更新
2）前端代码组件化，可复用，可封装
3）状态之间的互相依赖关系，只需声明即可
2.组件化
总结
1）组件是 组件的组合/原子组件
2）组件内拥有状态，外部不可见
3）父组件可将状态传入组件内部
3.状态归属问题
[当前价格]状态属于谁？
[当前价格] 属于 Root 节点! (小伏笔)
总结：状态归属于两人节点向上寻找到最近的祖宗节点
[当前价格]如何改变?
将 onChangeValue()向下传递
Javascript 中，函数是 (一等公民)
思考
1.React 是单向数据流，还是双向数据流?
单项数据流
React 的设计思路————组件化
组件设计
1.组件声明了状态和 UI的映射
2.组件有 Props/State 两种状态
3.“组件”可由其他组件拼装而成
组件代码会是什么样子?
1.组件内部拥有私有状态 State
2.组件接受外部的 Props 状态提供复用性
3.根据当前的 State/Props，返回一个 Ul
响应式编程
React 的设计思路- 生命周期
三.React(hooks) 的写法
四.React 的实现
React 的实现 -Problems
1.JSX 不符合 JS 标准语法
2.返回的 JSX 发生改变时如何更新 DOM
3.State/Props 更新时，要重新触发 render 函数
React 的实现 - Problem1
Virtual DOM (虚拟 DOM)
Virtual DOM 是一种用于和真实 DOM 同步，而在 JS 内存中维护的一个对象，它具有和 DOM 类似的树状结构，并和DOM 可以建立一一对应的关系
它赋子了 React 声明式的 API:您告诉 React 希望让 U 是什么状态，React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。
指定式API：需要一步步进行
声明式API：发出一个指令
响应式API：声明式的一种，一个状态改变会连带改变另一个状态
React 的实现 - How to Diff？
trade off 权衡
完美的最小 Diff 算法，需要 O(n^3) 的复杂度 牺牲理论最小 Diff，换取时间，得到了O(n)复杂度的算法: Heuristic O(n) Algorithm
五.React 状态管理库
React 状态管理库 - 核心思想
React 状态管理库 - 推荐
将状态抽离到 UI外部进行统一管理
React 状态管理库 - 状态机
当前状态，收到外部事件，迁移到下一个状态
React 状态管理库 Modern.js/Reduck
六.应用级框架科普
