react框架的状态管理

安装:

cnpm install --save redux
cnpm install --save react-redux
 
安装好后导入模块内容:
impor {createStore} from 'redux'
 
import {Provider,connect} from 'react-redux'
 
 
导入模块:
import { createStore } from 'redux'
//createStore方法用于创建管理状态的仓库对象
import { Provider,connect } from 'react-redux'
//Provider将store对象注入到组件上
//状态和状态方法连接到我们的组件上
 
 
 
状态管理实现步骤:
计数小案例:
.组件设置
class Counter extends React.Component {
render() {
const { value, onIncreaseClick } = this.props
return (
<div>
<span>{value}</span>
<button onClick={onIncreaseClick}>Increase</button>
</div>
)
}
}
.mapStateToProps(返回state中被更改的值)/mapDispatchToProps(返回被触发的方法改变的内容)定义 .定义根据action,{tpye:'类型',其他属性(一般用于传值)}对象真正更改state的函数,要更改视图的话,必须返回全新的state,reduce函数 .创建仓库对象
var store = createStore(reduce函数) .将内容与组件相连接
var App = connect(
mapStateToProps,
mapDispatchToProps
)(Counter) 6最终将store绑定到组件,并且渲染出来
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
上一篇:python 函数学习sys.argv[]


下一篇:[总结] fhq_Treap 学习笔记