众所周知,React只是一个View层而已,它不是一个完整的前端解决方案。只是给出了页面组件化的解决思路,但组件之间如何沟通?代码之间的结构?它并没有给出更多的内容。顶多也就是一些jsx的语法格式,但这点点的约定并不足以支撑一个大型
项目的开发。
后来,大概是14年的时候,React的亲爹Fackbook搞了个flux;然后到了2016年吧,Redux就出现了,这个东西再加上React,才可以称得上一个前端架构。
先来说一个Redux是干嘛的,它其实和vue.js的vuex特别的像,都是为了管理多个组件之间的数据的。就是把数据或是状态吧,都放在组件树之外的一个公共的地方,然后根据需要去操作它。
主要应用场景应该是大的复杂的项目或是spa单页应用,使用redux比较好。如果是一些简单的东西,那就有点大才小用了。
总体来讲,就是多交互,多角色,多个数据源,一个组件的状态在不同的情况下要保持数据的一致或不一致,多个组件的状态会相互影响并产生链式反应的这些情况下,应该是需要使用redux的。
如果你使用过vuex,那就很容易理解redux的思想。如果没有也没关系,反正redux的中心思想就是二句话:
1,组件是一个状态机,状态与视图相对应;
2,所有组件的所有状态,都放在一个全局对象里。
确定你理解上述二句话,那么下面的东西会很简单。
所有的状态,放在哪?
Store,就在这里,每个应用只有一个Store对象。创建它使用createStore方法。
想得到某个点的状态,怎么办?
状态是啥?State,咋获得?getState();找谁用?store.getState()。
很好理解吧,
状态和视图一一对应,视图变了,咋更新状态?
使用Action,它是个啥?对象。谁使用?View,视图,它来使用Action。
Action,是改变state的唯一办法。(这思路和vuex完全一样)
Store收到了Action以后,会发出一个新的State,这时view会发生变化。
这个过程,就是Reducer,这时,view就不一样了。
细说起来也挺长的,详细的内容,咱们周日再聊吧。