状态管理是前端整天遇到的概念,但是大家是否思考过什么是状态,管理的又是什么呢?
我们知道,程序是处理数据的,数据是信息的载体,比如颜色是红色或蓝色这就是数据。
那为什么不叫数据管理呢?状态和数据是什么关系?
什么是状态状态是数据的变化,比如颜色是红色或蓝色是数据,而颜色从红色变为蓝色这就是状态了。
状态的改变对应着视图的渲染或者某段逻辑的执行。比如颜色从红色变为蓝色可能就要重新渲染视图,并且执行发送请求到服务端的逻辑。
通过视图交互或者其他方式触发状态的变化,状态变化联动视图的渲染和逻辑的执行,这就是前端应用的核心。
为什么之前jQuery时代没咋听说状态管理的概念,而Vue、React时代经常听到呢?
jQuery时代是手动把数据渲染到视图和执行数据变化之后的逻辑的,它可能没有明确的状态这一层,而是直接把数据渲染成dom,下次需要数据也是从dom来取的。
而Vue、React前端框架的时代不需要手动操作dom和执行数据变化之后的逻辑,只要管理好状态,由前端框架负责状态变化之后的处理。
状态管理管理的是什么呢?
什么是状态管理状态管理具体有两层含义:
状态变化之前的逻辑,一般是异步的。状态变化之后的联动处理,比如渲染视图或执行某段逻辑。比如React的setState不会马上修改状态,而是异步的批量的执行,把状态做一下合并。
比如Redux的action在修改全局state之前也是要经历中间件的处理的。
这些都是状态变化之前的异步过程的管理,是状态管理的第一层含义。
再比如ReactsetState修改了状态之后要触发视图的渲染和生命周期函数的执行,hooks在依赖数组的状态变化之后也会重新执行。(vue的data修改之后会重新渲染视图、执行