关键词： 状态 状态管理 响应式 setState data(vue) 数据变化
状态：状态是数据的变化，通过视图交互或其他方式触发状态变化，状态的改变联动视图的渲染和逻辑的执行。
状态管理：管理状态变化前的逻辑，一般是异步的；比如setState(react)异步执行，不立即触发状态改变，异步做完合并再变；管理状态变化后的联动处理，比如视图渲染或执行某段逻辑。
推荐文章
监听对象变化，实现状态管理的两种方式
状态通常是个集合，用对象表示，比如state(react)、data(vue)。
提供api修改state
提供api修改state，在api内做state变化前的处理，在state变化后做联动处理；直接修改state不起作用。比如setState(react)，setState中做状态变化前的状态合并，触发状态变化后视图渲染、hooks、声明周期的重新执行。
对象代理
代理对象的get、set， getter中收集依赖，setter中通知依赖更新。比如data(vue)，getter中将依赖封装成Watcher，setter中通知Watcher。
这种实现思路叫响应式，即状态变化后自动响应变化做联动处理。
vue2与vue3实现响应式区别
vue2实现原理
Object.defineProperty(data, 'count', {
get() {},
set() {}
})
存在问题
增删属性，无法创建对应getter、setter；数组通过下标直接修改，也不会被监听到变化。
vue3实现原理
new Proxy(data, {
get(target, prop) {
return Reflect.get(target, prop)
},
set(target, prop,value) {
return Reflect.set(target, prop,value)
},
get(target, prop) {
return Reflect.deleteProperty(target, prop)
}
})
可以监听到属性的增删等变化。注意使用Reflect而非target（Reflect与target的this指向不同）。
状态管理方案
前端框架内置的组件内状态管理方案
react的setState，vue的data是前端框架内置的组件内状态管理方案。
性能优化
频繁更新state，可以合并处理。setState(react)是异步的，会做批量合并操作；data(Vue)是直接修改对象，不能合并，但它的watcher执行是异步的，vue对watcher队列数组做了去重。
前端框架提供的组件间的状态管理方案
props、react的context、vue的eventBus是前端框架提供的组件间的通讯方案，组件通讯包含组件的状态同步、数据传递。
组件间通讯方式，详见：组件通讯
第三方全局状态管理方案
比如redux、vuex、mobx等
小结
不同的状态管理方案都没有脱离2种状态管理方式：提供状态修改的api、对象代理。也没有脱离状态管理的两层含义：对状态变化前的异步过程做管理，对状态变化后做联动处理。只不过他们用在不同场景，提供不同封装形式（对象、函数），基于不同的思想（面向对象、函数式）结合了不同的异步管理方案（rxjs等）。
状态是数据的变化，管理状态是管理状态变化前的逻辑处理和状态变化后的联动视图渲染或其他逻辑。
