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:  }
 // 初始状态为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 +  }
 // 如果以上动作类型都不是，则返回最初状态
 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')
 );