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