在RN里, 每个组件有两个属性, state 和 props, 他们都是对象, 里面可以包含多个属性
-
state负责记录组件状态, 组件根据不同的 state 内容展示不同的样式或拥有不同的功能, 使用setState方法改变 state 会重新刷新组件 -
props负责接收初始化属性和存储属性, 一般里面的内容不会改变.
可以理解为, 会改变组件功能或样式的 存state, 否则存props
Redux是专门管理 state 的框架, 它把 state 集中在一起管理, 让UI组件只专注于显示样式.
Provider: redux 内置的组件, 这个组件不负责UI显示 只处理逻辑, 对 state 的操作, 其实就是改变它的 state
store: redux 要求, 每个项目有且仅有一个 store, 用来管理整个项目的 reducer
reducer: 一个函数, 当action改变或者初始化的时候被调用, 根据不同的action 返回不同的state, 返回的 state 交给 Provider
action: UI组件的事件, 通过 reducer 来处理
state: Provider 的 state, 想要更改 state 只可以通过 action 事件引发的 reducer 函数改变
Redux工作流程
Redux工作流程
例子:
/** UI组件 */
class Page extends Component {
render() {
// 这里是从props里面取出 propsAction 和 propsText 这两个属性, 这里不能写错名字, 要和下面的 mapStateToProps和 mapDispatchToProps 方法里面的相同
const {propsAction,propsText} = this.props;
return(
<View style = {{width:'100%', height:'100%', backgroundColor:'yellow'}}>
<Text style = {{height:30, width:'100%', backgroundColor:'green'}}>{propsText}</Text>
<TextInput onChangeText = {propsAction} style = {{height:30, width:'100%', backgroundColor:'white'}} ></TextInput>
</View>
)
}
}
// state的初始值 或者默认值
const initState = {
text:'123'
}
// action的type
const TYPE_KEY = 'TYPE_KEY'
// action改变的时候会调用这个方法 根据不同的action 返回对应的state
const reducer = (state = initState, action) => {
switch (action.type) {
case TYPE_KEY: {
return {...state, text: action.newText}
}
default: return initState
}
}
/**
* 建立state和UI组件的映射关系 把state.text 映射到UI组件的props.propsText上面
* 当state 改变的和初始化的时候会调用这个方法 更新propsText的值
*/
const mapStateToProps = (state) => {
return {
propsText:state.text // 这个propsAction 要和UI组件的props中的属性名对应
}
}
/*
* 建立Action和UI组件的映射关系, 说是映射倒不如说是给UI组件的props.prosAction赋值
* 当UI组件触发事件的时候调用, dispatch会调用reducer方法改变state
*/
const mapDispatchToProps = (dispatch) => {
return {
propsAction:(changedText) => { // 这个propsAction 要和UI组件的props中的属性名对应
dispatch({
type:TYPE_KEY, // type是判断action类型的依据,其他属性名可以不同或者没有, type必须有
newText:changedText, // 这个属性要在reducer中用, 这两处属性名要相同
})
}
}
}
// 一个应用只应该有一个store , 因为例子比较简单所以就写这里了
const store = createStore(reducer);
// 绑定UI组件和映射方法
const APP = connect(mapStateToProps, mapDispatchToProps)(Page);
export default class Index extends Component {
render() {
return (
<Provider store={store}>
<APP></APP>
</Provider>
);
}
}
