react框架的状态管理

Posted dark-fire-liehuo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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‘)
);

以上是关于react框架的状态管理的主要内容,如果未能解决你的问题,请参考以下文章

Facebook 新一代 React 状态管理库 Recoil

radioreact获取状态

React-5-状态管理器Redux

Angular 真的需要状态管理么?

React状态管理:react-redux和redux-saga(适合由vue转到react的同学)

Flutter状态管理框架fish-redux