react框架的状态管理

时间：2018-09-01 23:59:12 阅读：396 评论：0 收藏：0 [点我收藏+]

标签：状态 mil cnp creat app cnpm 计数 stat render

安装：

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(

<App />

</Provider>,

document.getElementById(‘root‘)

);

react框架的状态管理

标签：状态 mil cnp creat app cnpm 计数 stat render

原文地址：https://www.cnblogs.com/Dark-fire-liehuo/p/9571654.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行