一、学习路线
本次前端青训营已经结束，为了之后自己能温故而知新或者说能更加深入地学习前端知识，我觉得很有必要记录一下本次青训营所学习的内容，按顺序分别是：
- 计算机网络概述
- Linux基础
- shell脚本与编程
- 编程范式
- 客户端容器
- 前端语言串讲
- 理解CSS
- 深入理解JS
- 深入浅出TypeScript
- React基础与实践
- React状态管理
- React路由与项目实践
- 组件库的使用与自定义组件
二、状态管理工具
Vue：Vuex（pinia）
Angular：Service和Rxjs
React：
- React自带：Local State（props）和Context
- 单向数据流：Flux、Redux（Redux-toolkit）
- 双向数据绑定：Mobx
- 原子型状态管理：Recoil、Jotai
- 异步操作密集型：Rxjs
每一种状态管理工具都有其不同的适用性，不同场景下需要合理的选择状态管理工具
跟不同前端框架的定义有关，vue和Angular双向数据鄉定，计算属性等，数据是响应式的，控制视图刷新，拥有计算属性等，这些使得Vue 和Angular需要状态管理的场景减少，此外其本身就包含了完整的状态管理工具，比如vue的Vuex和Pinia， Angular的Service(RXjs)等，从官方定调。 而React不一样，React是一个纯Ul层的前端框架，UI=fn(state)，React将状态的变动完全交给开发者。
props和context都是React中常用的状态管理工具，它们都有自己的优点和缺点。
优点：
- props的优点：
- props是React中自上而下单向数据流的核心，通过父组件向子组件传递状态和数据，使得组件之间的通信非常清晰明了。
- props的传递方式是简单的数据传递，组件的依赖关系也非常清晰。
- props能够帮助我们实现组件复用，提高了代码的可维护性和可重用性。
- props的缺点：
- props的单向数据流也是其缺点，当组件层次比较深并且需要在组件之间共享数据时，props的传递会变得非常麻烦和繁琐。
- 当props传递的数据比较多时，组件之间的依赖关系就会变得非常复杂。
当然这种向上延伸的方法，不是无限的，如果一直往上延伸，会出现一个父组件嵌套10几层子组件的情況，必须要有一个-度”，超过这个“度:后，我们就认 为local State的方式就不太实用了。 这个“度”，在前端开发中，大部分情况下我们认为就是子页面。我们一般认为，单页应用中，子页面以及子页面之下的组件都是可以用local State来解決状态管理问题的，而子页面和子页面之间，是不需要再 往上延伸。那么子页面和子页面之问如何通信呢？
答案是：子页面和子页面之间的通信，React本身提供了 Context。
- context的优点：
- context允许我们在组件树中共享数据，直接传递props的缺点是需要一层一层的传递，而在需要共享大量数据的情况下，context则能帮助我们更加方便地进行传递。
- context提供了一个全局共享的数据源，可以让多个子组件方便地访问这些数据，减少了代码的重复和冗余。
React中的Context解決了react中，props或 者state进行 多级数据传递，则数据需要自顶下流经过每一级组件，无法跨级的问题。但是Context在页面问共享数据的时候同样有很多问题：
- context的缺点
- Context相当于全局变量， 难以追溯数据的变更情況
- 使用Context的组件内部轉合度太高，不利于组件的复用和单元测试
- 会产生不必要的更新(比如会 穿透memo 和dependicies等）
- Context 只能存储单一值，无法存储多个各自拥有消费者的值的集合。
- 粒度也不太好控制，不能细粒度的区分组件依赖了哪一个Context
- 多个Context会存在层层嵌套的问题
