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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

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

代码块：

  1 代码块：
  2 import React from 'react';
  3 import ReactDOM from 'react-dom';
  4 import './index.css';
  5 // import App from './App';
  6 import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
  7 import { createStore } from 'redux'
  8 // import store from './store.js'
  9 import { Provider,connect } from 'react-redux'
 10 // import Page3final from './Page3';
 11 
 12 // as的作用，另外取名 Router = BrowserRouter
 13 class Counter extends React.Component {
 14 render() {
 15 // const { value, onIncreaseClick } = this.props
 16 const value = this.props.value
 17 //value是计的数，实际上store.state通过props来进行传递到组件
 18 const onIncreaseClick = this.props.onIncreaseClick
 19 //onIncreaseClick，这个方法也是通过props传入进来，这个函数执行1次，那么这个value值+1
 20 console.log(this.props)
 21 return (
 22  
 23 <div>
 24 <span>{value}</span>
 25 {/* <span>{this.props.value}</span> */}
 26 <button onClick={onIncreaseClick}>Increase</button>
 27 </div>
 28 )
 29 }
 30 }
 31 const increaseAction={type:'increase'} //此对象有一个type属性
 32 //reduce函数，这个函数最终决定state如何更改内容，而且每一次如果要更新视图
 33 //那么state都要全新更新一个对象
 34 // reducer函数，这个函数最终决定state如何更改内容，而且每一次如果要更新试图，那么state都要全新的1个对象
 35 
 36 var initState = { count: 0 }
 37 // 初始状态为initState，根据action的不同值（类型）执行不同的内容
 38 function counter(state = initState, action) {
 39 const count = state.count
 40 // action.type表示动作的类型
 41 switch (action.type) {
 42 // case 'increase':表示动作的类型为increase
 43 case 'increase':
 44 // state.count++
 45 // console.log(state)
 46 return { count: count + 1 }
 47 // 如果以上动作类型都不是，则返回最初状态
 48 default:
 49 return state
 50 }
 51 }
 52 //实例化仓库对象，需要决定状态如何变更的函数，该仓库管理状态
 53 console.log(createStore)
 54 const store = createStore(counter)
 55 
 56 
 57 //将状态绑定到props的方法
 58 //传入一个state值进来，然后返回一个对象绑定到props里
 59 function mapStateToProps(state) {
 60 return {
 61 value: state.count
 62 }
 63 }
 64 //将触发更改状态的方法绑定到(组件上)props
 65 //首先传入dispatch进行触发
 66 function mapDispatchToProps(dispatch){
 67 // 返回方法的内容，返回的内容都会被绑定到props上
 68 return{
 69 // ()=>dispatch(increaseAction)这个函数具有dispatch方法
 70 //dispatch则调用counter函数然后将
 71 //const increaseAction = { type: 'increase' } 获取的类型进行下一步
 72 // onIncreaseClick:()=>dispatch(increaseAction)
 73 onIncreaseClick:function(){//以上写法相当于这个写法
 74 dispatch({type:'increase'})
 75 }
 76 }
 77 }
 78 // Action Creator
 79 // const increaseAction = { type: 'increase' } //此对象有一个type属性
 80 // function mapDispatchToProps(dispatch) {
 81 // return {
 82 // // onIncreaseClick: () => dispatch(increaseAction)
 83 // onIncreaseClick:function(){
 84 // dispatch({type:'increase'})
 85 // }
 86 // }
 87 // }
 88 
 89 //connect方法给Counter组件的props传入
 90 //state（mapStateToProps,）以及更改state的方法（mapDispatchToProps）
 91 //此处connect表示方法，连接
 92 const App = connect(
 93 //两个函数作为一个参数传入，然后以函数传入到组件Counter，
 94 //再实例化一个App
 95 mapStateToProps,
 96 mapDispatchToProps
 97 // 此处的Counter表示组件
 98 )(Counter)
 99 
100 ReactDOM.render(
101 // 再将App和store注入进来
102 <Provider store={store}>
103 <App />
104 </Povider>,
105 document.getElementById('root')
106 );

View Code




以上是 react框架实现点击事件计数小案例 的全部内容， 来源链接： utcz.com/z/384432.html

回到顶部