前言: 看了一个多星期的JS,结果没想到花在React生态上的时间却超过了一个月,之前天真的以为前端不过是Html Css JS凑在一起而已。看来我现在的观点已经是相当的落后了,花了一个星期看完了React,原以为就可以直接上手了,结果发现除了做一些小页面Demo,React一句话说穿就只是一个视图层。既然踏入了React生态圈,想要工程上使用至少要使用React Redux React-router。
Redux基础概念: 在写了一些Reacr页面后,就会出现状态管理的问题,在React中有两个属性 Props State用来作为组件的属性。
- Prop通常是父组件传给子组件的。
- State自己控制 通过setState来更新属性。
通常在会出现数据是一些组件需要共同持有的,在React中的原生的解决方案状态提升--将这些共同的属性提取出来,放在组件的父组件中,如果两个组件需要同步数据,通常React的原生写法则是一个组件更新父组件的数据,然后回调数据更新到另外一个组件中。当页面相当的复杂的时候,你会发现React其实没有比较好的方法。
Flux 框架
React官方提供了一个Flux数据流单方向流动框架,我们首先介绍一下Flux的基础概念
- View : 视图层
- Action : 视图层发出的消息
- Dispatcher; 用来接受Actions 执行回调函数
- Store: 用来存放应用的状态,一旦发生变动,就提醒Views要更新页面
Flux提出的是一种框架概念,而Redux则是遵循Flux框架去实现的一个状态管理框架,Redux当然有自己实现中不同之处,比如Redux 通常只有一个Store存储所有的数据,没有所谓的Dispatcher转到是Reducers来实现。
React中的Context
React中有一个属性Context,了解它对于我们接下来要介绍的React-redux很有好处,前面讲到了关于 组件,现在假如所有的组件都有一个主题颜色(ThemeColor),如果是原生的编写我们需要每层都写props.themeColor,如果我们的组件树层数很深的话,这样维护起来简直就是灾难。如果有一个全局变量来存储这个变化就好了。
React中的Context则就是这样的一个东西,只要某一个组件放了某些状态,这个组件之下的所有子组件都可以直接访问这个状态。一个组件的Context只能被它的子组件访问,它的父组件是不能访问的。
Redux基本概念
在学习Redux的时候,在这里卡了很长时间,当然我现在不敢把握说清楚,首先我们先了解具体中React-redux中的一些特有名词。
- Store: 全局变量 用来存储所有的数据 通过createStore方法产生 通常有属性 state dispatch r
- Provider: 顶部组件, Store便是Provider组件的属性
- Action: 普通的JS对象,规定对象中必有 type
- connect: 高阶函数 从Context中获取数据 然后通过函数mapStateToProps等方法 传给Dumb组件
- Reducer: 纯函数 createStore方法接受的参数便是Reducer, Reducer的两个参数 state 一个action