尚硅谷-react教程-求和案例-优化3-整合UI组件和容器组件-总结优化-笔记

继续优化,尚硅谷-react教程-求和案例-优化2-Provider组件的使用-笔记-CSDN博客

删除components这个文件夹,整合components/Count/ndex.jsx和containers/Count/index.jsx

(一)等待整合的文件

(1)原来的components/Count/ndex.jsx:

javascript 复制代码
import React, {Component} from 'react';
class Count extends Component {
    // count已经交给了redux去管理了
    state = {carName:'奔驰c63'}
    // 加法
    increment=()=>{
        const {value} = this.selectNumber
        this.props.jia(value*1)
    }
    // 减法
    decrement=()=>{
        const {value} = this.selectNumber
        this.props.jian(value*1)
    }
    // 奇数再加
    incrementIfOdd=()=>{
        const {value} = this.selectNumber
        if(this.props.count %2 !== 0) {
            this.props.jia(value*1)
        }
    }
    // 异步加
    incrementAsync=()=>{
        const {value} = this.selectNumber
        this.props.jiaAsync(value*1,500)
    }
    render() {
        return (
            <div>
                <h1>当前求和为:{this.props.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>&nbsp;
            </div>
        );
    }
}
 
export default Count;

(2)原来的containers/Count/index.jsx:

javascript 复制代码
// 引入Count的UI组件
import CountUI from '../../components/Count'
// 引入action
import {
    createDecrementAction,
    createIncrementAction,
    createIncrementAsyncAction
} from '../../redux/count_action'
 
// 引入connect用于连接UI组件与redux
import {connect} from 'react-redux'

// 版本四
// 使用connect()()创建并暴露一个Count的容器组件
export default connect(
    state =>({count:state}),
    // mapDispatchToProps的精简写法
    {
        jia:createIncrementAction,
        jian:createDecrementAction,
        jiaAsync:createIncrementAsyncAction,
    }
)(CountUI)

(二)整合成一个文件,containers/Count/index.jsx

javascript 复制代码
import React, {Component} from 'react';
// 引入action
import {
    createDecrementAction,
    createIncrementAction,
    createIncrementAsyncAction
} from '../../redux/count_action'

// 引入connect用于连接UI组件与redux
import {connect} from 'react-redux'

// 定义UI组件
class Count extends Component {
    // count已经交给了redux去管理了
    state = {carName:'奔驰c63'}
    // 加法
    increment=()=>{
        const {value} = this.selectNumber
        this.props.jia(value*1)
    }
    // 减法
    decrement=()=>{
        const {value} = this.selectNumber
        this.props.jian(value*1)
    }
    // 奇数再加
    incrementIfOdd=()=>{
        const {value} = this.selectNumber
        if(this.props.count %2 !== 0) {
            this.props.jia(value*1)
        }
    }
    // 异步加
    incrementAsync=()=>{
        const {value} = this.selectNumber
        this.props.jiaAsync(value*1,500)
    }
    render() {
        return (
            <div>
                <h1>当前求和为:{this.props.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>&nbsp;
            </div>
        );
    }
}

// 使用connect()()创建并暴露一个Count的容器组件
export default connect(
    state =>({count:state}),
    // mapDispatchToProps的精简写法
    {
        jia:createIncrementAction,
        jian:createDecrementAction,
        jiaAsync:createIncrementAsyncAction,
    }
)(Count)

总结:

## 5.求和案例_react-redux优化

(1).容器组件和UI组件整合成一个文件

(2).无需自己给容器组件传递store,给<App/>包裹一个**<Provider store={store}>**即可

(3).使用了react-redux后也不用再自己监测redux中状态的改变了,容器组件可以自动完成这个工作

(4).mapDispatchToProps 也可以简单的写成一个对象

(5).一个组件要和redux"打交道"要经过哪几步?

(1).定义好UI组件----不暴露

(2).引入connect生成一个容器组件,并暴露,写法如下:

connect(
state => ({key:value}) // 映射状态
{key: xxxxAction} // 映射操作状态的方法
)(UI组件)

(3).在UI组件中通过this,props.xxxxxxxx读取和操作状态

相关推荐
Rousson7 分钟前
硬件学习笔记--82 连接器的选用原则与流程
笔记·单片机·学习
Larry_Yanan2 小时前
QML学习笔记(四十)QML的ApplicationWindow和StackView
c++·笔记·qt·学习·ui
kyle~6 小时前
C++--- override 关键字 强制编译器验证当前函数是否重写基类的虚函数
java·前端·c++
Light606 小时前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
爱生活的苏苏7 小时前
elementUI 表单验证-联动型校验
前端·javascript·elementui
摇滚侠7 小时前
Spring Boot 3零基础教程,Spring Boot 日志的归档与切割,笔记22
spring boot·redis·笔记
wan5555cn7 小时前
当代社会情绪分类及其改善方向深度解析
大数据·人工智能·笔记·深度学习·算法·生活
一只小风华~8 小时前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
*且听风吟9 小时前
html 实现鼠标滑动点亮横轴
前端·javascript·html
能不能别报错10 小时前
K8s学习笔记(二十一) RBAC
笔记·学习·kubernetes