这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
React设计思路 | 青训营笔记
我们为什么需要React——设计思路
我们先来看一张图：
当我们用传统技术进行前端开发时，会遇到如下问题：
- 用户改变颜色、改变机型，我们需要相对应地改变价格显示以及其他详细信息，这也就意味着我们需要绑定多个onClick事件，当需要绑定的交互控件很多时，我们手动调用DOM更新，会使程序看起来会很臃肿混乱。
- 其中有多个部分外观布局设计相似，但我们将其重复写了多个（例如上面Choose your finish）部分，欠缺了基本的代码层面的封装和隔离，代码层面没有组件化。
- UI之间的数据依赖关系，需要手动来维护，如果依赖链路长，则会出现回调地狱。
⭐响应式开发
传统开发中，我们给定内容，运行后编译器给定输出，这种模式称为转换式系统，但我们前端更多的是需要监听事件，以消息进行驱动，给我们实时反应，所以我们要采用响应式系统
响应式系统完成下面这些事：
- 发生事件
- 执行既定的回调
- 状态变更
⭐实现组件化
还是上边图的例子，我们将其结构进行拆分：
其中相似的结构就可以封装为组件，在使用时只需进行简单调用即可，不需再重复写入
其中组件内也可以包含组件，组件就是组件的组合，其中最小的组件便称为原子组件
组件内拥有状态，外部是不可见的，父组件可以将状态传入组件内部
这样我们就构成了一套完整的解决方案
总结
这节课了解了react的设计思路——解决了什么问题，有了响应式和组件化开发可以简化项目中的响应，以及降低各部分的耦合，实现代码层次的分离，开发更加高效！
