React的设计思路
React的应用场景：
- 前端应用开发
- 移动原生应用开发
- 结合
electron，进行桌面应用开发
如上图，用原生的JavaScript编写，如果要改变右上角的currentValue状态，我们需要绑定事件，如图，为颜色和配置的选项卡绑定点击事件，当点击这些选项卡的时候，执行事件的回调，通过回调函数改变currentValue的状态，然后通过DOM的API改变右上角的价格数字，这样代码写起来是很繁琐的，如果我们需要的改变的状态不止一处的时候那？例如，左下角也有一个价格数字，会随着用户的选择而改变，这样一来，我们的事件回调就不止要改变一处的状态，最后还要手动调用API改变页面上的数字，随着这样的情况越来越多，代码写起来就越来越繁琐。
所以早期的UI编程痛点总结如下：
- 状态更新，
UI不会自动更新，需要手动的调用DOM进行更新。 - 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“回调地狱”。
以往的编程都是给定一个输入然后求一个输出，这样的模式我们称为转换式系统，常用于编译器、数值计算
在前端开发中，大多数情况下我们都是以”某个事件发生，改变某个状态“的模式来设计的，这样监听事件，用消息来驱动的模式称为响应式系统
响应式编程就是结合响应式系统把**”事件-->执行回调-->状态更新-->UI更新"**这个过程实现自动化来实现的。
响应式编程解决了早期UI编程的痛点：
- 状态更新，
UI自动更新 - 前端代码组件化，可复用，可封装
- 状态之间的互相依赖关系，只需声明即可
那么什么是组件?
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
如何设计组件？
- 组件声明了状态和
UI的映射 - 组件有
Props/State两种状态 - “组件”可由其他组件拼装而成
