例子：
在一个手机购物页面上，右上角有一个手机价格，右侧配置面板中可以选择不同配置、颜色。任何一种配置的改变都会影响手机的价格，此价格必须反映在页面右上角，即每当选项改变时，都要改变一次价格。如果用原生的JavaScript写，要声明currentValue变量，一个整数，给配置选项放一个onClick事件然后写一个callback，每当任何一个callback被触发的时候都要更新currentValue变量，修改了变量后还没有结束，因为还没有更新UI，此时还要手动调用DOM接口更新右上角的数字，这样写代码并不简单。比如可以挂载很多onClick事件，其中有很多传导部分，比如当前价格改变的时候不仅影响右上角数字，还有其他很多地方会改变，相当于所有的callback都要加一段调用DOM接口更改数字的逻辑的逻辑，这样写会很混乱。
痛点：
- 状态更新，UI不会自动更新，需要手动的调用DOM进行更新
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
- UI之间的数据依赖关系需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。
响应式系统：
事件->执行既定的回调->状态变更
前端UI：
事件->执行既定的回调->状态变更->UI更新
期望：
- 状态更新，UI自动更新。
- 前端代码组件化，可复用，可封装。
- 状态之间的互相依赖关系，只需声明即可。
现在给之前的页面做语义化的组件隔离，比如整个页面为一个根节点，Root节点包含内容和顶栏两部分。组件隔离之后需要思考状态归属问题，比如“当前价格”状态属于谁？因为父组件可以控制子组件，父组件可以把状态传入子组件中，那么“当前价格”只能属于Root节点。因为只有在此节点，才能让型号选择和顶栏共享价格变量。
