UI编程痛点
01.状态更新，UI不会自动更新，需要手动的调用DOM进行更新
02.欠缺基本的代码层面的封装和隔离，代码层面没有组件化
03.UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”
期望
01.状态更新，UI自动更新
02.前端代码组件化，可复用，可封装
03.状态之间的互相依赖关系，只需声明即可。
响应式与转换式
转换式系统≠响应式系统
响应式系统
事件————>执行既定的回调函数————>状态变更
前端UI
事件————>执行既定的回调函数————>状态变更————>UI更新
组件化
React的核心思想是将用户界面划分为独立的组件。每个组件负责自己的逻辑和渲染，可以嵌套并且通过props进行数据传递。这样做的好处是可以将复杂的界面拆分成小而简单的部分，减少代码冗余，提高可维护性。
组件化总结
01.组件是组件的组合/原子组件
02.组件内拥有状态，外部不可见
03.父组件可将状态传入组件内部
组件设计
01.组件声明了状态和UI的映射
02.组件有Props/State两种状态
03.“组件”可由其他组件拼装而成
组件代码会是什么样子？
01.组件内部拥有私有状态State
02.组件接受外部的Props状态提供复用性
03.根据当前的State/Props，返回一个UI
状态归属问题
[当前价格]状态属于Root节点
状态上升：状态归属于两个节点向上寻找到最近的祖宗节点
将onChangeValue()向下传递
单向数据流：React采用了单向数据流的数据管理模式。父组件通过props向子组件传递数据，子组件不直接修改父组件的状态，而是通过回调函数将数据变更通知给父组件。这样做的好处是易于追踪数据流动变化，减少了复杂度。
生命周期
React提供了一系列生命周期方法，用于在组件的不同阶段执行相应的操作。这些方法可以帮助我们处理组件的挂载、更新和卸载等不同状态下的逻辑，例如在组件挂载时进行初始数据加载，在组件被卸载时进行清理工作。
总结
学习React的过程中，重要的一点是理解其设计思路。React作为一个JavaScript库，旨在提供高效、可持续的用户界面开发体验。学习React的过程中还需要深入学习官方文档，参考优秀的开源项目，不断实践并进行思考和总结，才能更好地理解和应用React的设计思路。
