react框架实现点击事件计数小案例

下面将以一个小案例来讲解react的框架的一般应用，重点内容在代码段都有详细的解释，希望对大家有帮助

代码块：

代码块：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
import { createStore } from 'redux'
// import store from './store.js'
import { Provider,connect } from 'react-redux'
// import Page3final from './Page3';

// as的作用，另外取名 Router = BrowserRouter
class Counter extends React.Component {
render() {
// const { value, onIncreaseClick } = this.props
const value = this.props.value
//value是计的数，实际上store.state通过props来进行传递到组件
const onIncreaseClick = this.props.onIncreaseClick
//onIncreaseClick，这个方法也是通过props传入进来，这个函数执行1次，那么这个value值+1
console.log(this.props)
return (
 
<div>
<span>{value}</span>
{/* <span>{this.props.value}</span> */}
<button onClick={onIncreaseClick}>Increase</button>
</div>
)
}
}
const increaseAction={type:'increase'} //此对象有一个type属性
//reduce函数，这个函数最终决定state如何更改内容，而且每一次如果要更新视图
//那么state都要全新更新一个对象
// reducer函数，这个函数最终决定state如何更改内容，而且每一次如果要更新试图，那么state都要全新的1个对象

var initState = { count: 0 }
// 初始状态为initState，根据action的不同值（类型）执行不同的内容
function counter(state = initState, action) {
const count = state.count
// action.type表示动作的类型
switch (action.type) {
// case 'increase':表示动作的类型为increase
case 'increase':
// state.count++
// console.log(state)
return { count: count + 1 }
// 如果以上动作类型都不是，则返回最初状态
default:
return state
}
}
//实例化仓库对象，需要决定状态如何变更的函数，该仓库管理状态
console.log(createStore)
const store = createStore(counter)


//将状态绑定到props的方法
//传入一个state值进来，然后返回一个对象绑定到props里
function mapStateToProps(state) {
return {
value: state.count
}
}
//将触发更改状态的方法绑定到(组件上)props
//首先传入dispatch进行触发
function mapDispatchToProps(dispatch){
// 返回方法的内容，返回的内容都会被绑定到props上
return{
// ()=>dispatch(increaseAction)这个函数具有dispatch方法
//dispatch则调用counter函数然后将
//const increaseAction = { type: 'increase' } 获取的类型进行下一步
// onIncreaseClick:()=>dispatch(increaseAction)
onIncreaseClick:function(){//以上写法相当于这个写法
dispatch({type:'increase'})
}
}
}
// Action Creator
// const increaseAction = { type: 'increase' } //此对象有一个type属性
// function mapDispatchToProps(dispatch) {
// return {
// // onIncreaseClick: () => dispatch(increaseAction)
// onIncreaseClick:function(){
// dispatch({type:'increase'})
// }
// }
// }

//connect方法给Counter组件的props传入
//state（mapStateToProps,）以及更改state的方法（mapDispatchToProps）
//此处connect表示方法，连接
const App = connect(
//两个函数作为一个参数传入，然后以函数传入到组件Counter，
//再实例化一个App
mapStateToProps,
mapDispatchToProps
// 此处的Counter表示组件
)(Counter)

ReactDOM.render(
// 再将App和store注入进来
<Provider store={store}>
<App />
</Povider>,
document.getElementById('root')
);