React学习day16__react求和&redux求和

基本的react求和案例

求和组件

import React, {Component} from 'react';

class Count extends Component {
    state ={count:0}
//加法
    increment=()=>{
        //函数体
       const {value} = this.selectNumber;
       const {count} = this.state;
       this.setState({count:count+value*1})
    }
//减法
    decrement=()=>{
        //函数体
        const {value} = this.selectNumber;
        const {count} = this.state;
        this.setState({count:count-value*1})
    }
    incrementIfOdd=()=>{
        //函数体
        const {value} = this.selectNumber;
        const {count} = this.state;
        if(count % 2 !== 0){
            this.setState({count:count+value*1})
        }
    }
    //异步加
    incrementAsync=()=>{
        //函数体
        const {value} = this.selectNumber;
        const {count} = this.state;
        setTimeout(()=>{
            this.setState({count: count+value*1})
        },200)
    }
    render() {
        return (
            <div>
               <h1>当前求和为：{this.state.count}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1" >1</option>
                    <option value="2" >2</option>
                    <option value="3" >3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>

            </div>
        );
    }
}

export default Count;

App.js组件调用

import React, {Component} from 'react';
import 'antd/dist/antd.css';
import './index.css';
import Count from "./compoment/Count";
class App extends Component {
    render() {
        return (
            <div>
              <Count/>
            </div>
        );
    }
}

export default App;

页面效果：

redux求和案例

在控制台安装redux ：yarn add redux

store.js

count_reducer.js

/*
1、该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
2、reducer函数会接到老哥参数，分别为：之前的状态（perState），动作对象（action）
* */
const initState = 0//初始化状态
export  default  function countReducer(preState=initState,action){
    const {type,data} = action
    //从action对象中获取：type、data
   switch(type){
       case 'increment': //如果是加
         return preState + data;
       case  'decrement': //如果是减
          return preState - data;
       default:
           return preState


   }
}

App.js

import React, {Component} from 'react';
import 'antd/dist/antd.css';
import './index.css';
import Count from "./compoment/Count";
class App extends Component {
    render() {
        return (
            <div>
              <Count/>
            </div>
        );
    }
}

export default App;

Count/index.js

import React, {Component} from 'react';
//引入store用于获取状态值
import store from '../redux/store'
class Count extends Component {
    componentDidMount(): void {
        store.subscribe(()=>{
            this.setState({})
        })
    }

//加法
    increment=()=>{
        //函数体
       const {value} = this.selectNumber;
       store.dispatch({type:'increment',data:value*1})
    }
//减法
    decrement=()=>{
        //函数体
        const {value} = this.selectNumber;
        store.dispatch({type:'decrement',data:value*1})
    }
    //奇数加
    incrementIfOdd=()=>{
        //函数体
        const {value} = this.selectNumber;
        const {count} = store.getState();
        if(count % 2 !== 0){
            this.setState({type:'increment',data:value*1})
        }
    }
    //异步加
    incrementAsync=()=>{
        //函数体
        const {value} = this.selectNumber;
        setTimeout(()=>{
            this.setState({type:' incrementAsync',data:value*1})
        },200)
    }
    render() {
        return (
            <div>
               <h1>当前求和为：{store.getState()}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1" >1</option>
                    <option value="2" >2</option>
                    <option value="3" >3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>

            </div>
        );
    }
}

export default Count;

componentDidMount()钩子函数

在 componentDidMount()里面调用setState（），将会触发一次额外的渲染，因为redux是管理状态并不能将改变后的状态渲染到页面，所以用
componentDidMount()，使得render被调用了两次。其它解释可以参考：https://segmentfault.com/q/1010000008133309

 componentDidMount(): void {
        store.subscribe(()=>{
            this.setState({})
        })
    }

subscribe

• store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。
• store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 store。

store.commit 和 store.dispatch 的区别

//加法
    increment=()=>{
        //函数体
       const {value} = this.selectNumber;
       store.dispatch({type:'increment',data:value*1})
    }

• commit：同步操作，数据提交至 mutations ，可用于读取用户信息写到缓存里
• dispatch：含有异步操作，数据提交至 actions ，可用于向后台提交数据
  引用：https://fullstack.blog.youkuaiyun.com/article/details/103658726