这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
本节课程主要分为四个方面：
React 的历史与应用 - 介绍 React 的发展历史以及应用场景。
react 3 fiber:用React语法写3D
React：library，2014-至今，各种围绕React的新工具/新框架开始涌现。
React可以实现轻量级的元宇宙相关开发
React 的设计思路 - 介绍 React 的设计思想，为什么 React 要设计成这样。
原生UI编程痛点：
- 状态更新，UI不会自动更新，需要手动调用DOM更新
- 欠缺基本的代码层面封装和隔离，代码层面没有组件化
- UI数据依赖关系，需要手动维护如果依赖链路长，会遇到“Callback Hell”
响应式系统：
React响应式编程：
React设计与实现——组件化
仅需要声明一次即可 声明a=b+c 当每次b、c改变时，a自动改变
React设计与实现——状态归属问题
- 先划分
- 组件是 组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
- 当前价格 状态属于谁？
- 属于Root节点 因为只有父组件可以控制子组件
- 状态归属于两个节点向上寻找到最近的祖宗节点
- 当前价格 如何改变？
- JS函数 是 变量
- 将 onChangeValue() 向下传递
思考：
- React是单向数据流，还是双向数据流？ 单向数据流，父组件给子组件传东西
- 子组件改变数据的方法：父组件将函数传给子组件，子组件执行该函数
- 如何解决状态不合理上升的问题？
- 状态管理库部分 学习
- 组件的状态改变后，如何更新DOM？
- React实现 学习
组件设计：
- 组件声明了状态和UI的映射
- 组件有Props/State两种状态 ：Props是外部传入的状态，State是内部的状态
- “组件”可由其他组件拼接而成
React设计与实现——生命周期：
-
React （hooks） 的写法 - 介绍基础的 React hooks 写法，以及常用的 hooks
-
React的实现
问题：
-
JSX不符合JS语法
-
返回的 部分 发生改变时如何更新
-
State/Props
指令式编程、声明式编程、响应式编程（声明式编程的一个类型，自己响应自己的过程）
当优先级很高的父组件发生改变时，它之下的所有子组件发生改变，生成虚拟的DOM，与原本的DOM发生改变
TradeOff使得DOM树更新次数少，计算速度更快etc
| 不同类型的元素 | 替换 |
| 同类型的DOM元素 | 更新 |
| 同类型的组件元素 | 递归 |
- React状态管理库
有利有弊，推荐将状态抽离到UI外部进行统一管理
状态机： 当前状态，收到外部事件，迁移到下一个状态
CPU也是很大很复杂的状态机
例如，QQ希望用户登录后仅对后台发送一次请求，用户头像等信息在这一次请求中获取、渲染，之后不需要再对后台发送请求。而放置用户头像的地方就是Store。
- 应用级框架科普
NEXT.JS:
MODERN.JS:
本堂课重点（不熟悉）内容：
- 声明式 - React易于创建交互式UI，当数据变动时React能高效更新并渲染合适的组件；以声明式编写UI，使代码更可靠且方便调试
- 组件化 - 构建管理自身状态的封装组件，对其组合以构成复杂的UI；组件逻辑使用JavaScrippt编写，容易在应用中传递数据，保证状态与DOM分离
- 跨平台编写 无论现在使用什么技术栈，在无需重写现有代码的前提下，引入React来开发新功能；React可以使用Node进行服务器渲染，或使用React Native开发原生移动应用
引用参考：
PPT：PPT
网站：React学习网站
