React 学习笔记总结(六)

最新推荐文章于 2024-05-31 16:14:57 发布
最新推荐文章于 2024-05-31 16:14:57 发布
阅读量446 收藏
点赞数
分类专栏： JavaScript 文章标签： react.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/it_holmes/article/details/128450177
版权

文章目录

1. redux 介绍

redux是一个专门用于做状态管理的JS库(不是react 插件库)。

可以用在react、angular、Vue等项目中，但基本与React配合使用。

作用：集中式管理react应用中多个组件共享的状态。

什么情况下，使用redux？

  • React的state状态存到了redux中。
    在这里插入图片描述

2. redux 工作流程

在这里插入图片描述

redux的三个核心概念：

action动作的对象。
在这里插入图片描述

Store将state、action、reducer联系在一起。
在这里插入图片描述

reducers负责加工处理state状态里面的数据逻辑等。
在这里插入图片描述

3. redux 的使用

1. 安装redux：

yarn add redux

或者
在这里插入图片描述

2. 创建store.js文件 和 reducer.js文件。

store.js如下：

/**
 * 该文件专门用于暴露一个store对象，整个应用只有一个store对象。
 */
// 引入createStore, 专门用于创建redux种最为核心的store对象
import {createStore} from 'redux'
// 引入为Count组件服务器的Reducer
import countReducer from './count_reducer'
// 暴露一个store
export default createStore(countReducer)

count_reducer.js如下：

/**
 *  1. 该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数。
 *  2. reducer函数会接到两个参数，分别为：之前的状态（preState）和 动作对象(action)
 */
const initState = 0
export default function countReducer(preState = initState,action){
    const {type,data} = action
    switch (type){
        case 'increment':
            return preState + data
        case 'decrement':
            return preState - data
        default:
            return preState
    }
}

3. 解决store状态修改后页面没有进行修改的问题。

  • 解决方式1：在componentDidMount钩子中进行监听。
import React, {Component} from 'react';
// 引用store，用于redux中保存的状态
import store from '../../redux/store.js'
// 标题
import { Typography,Button,Select } from 'antd';
const { Title } = Typography;

class Index extends Component {

    selectNumber = 1
	
	// fixme 通过此处进行监听。使用subscribe触发页面的刷新
    componentDidMount() {
        // fixme 检测redux 中状态的变化，只要变化，就调用render
        store.subscribe(()=>{
            // 触发页面刷新
            this.setState({})
        })
    }

    increment = ()=>{
        const value = this.selectNumber
        // dispatch方法：推送消息。
        store.dispatch({
            type:'increment',
            data:value * 1
        })
    }
    decrement = ()=>{
        const value = this.selectNumber
        const {count} = this.state
        store.dispatch({
            type:'decrement',
            data:value * 1
        })
    }
    incrementIfOdd = ()=>{
        const value = this.selectNumber
        const {count} = this.state
        console.log(value,count)
        if (count % 2 !== 0){
            this.setState({count:count + value * 1})
        }
    }
    incrementAsync = ()=>{
        const value = this.selectNumber
        const {count} = this.state
        console.log(value,count)
        setTimeout(()=>{
            this.setState({count:count + value * 1})
        },500)
    }

    // 下拉选择框事件
    handleChange = (value) => {
        console.log(`selected ${value}`);
        this.selectNumber = value
    }

    render() {
        return (
            <div>
                <Title level={2}>当前求和为：{store.getState()}</Title>
                <Select
                    defaultValue="1"
                    style={{
                        width: 120,
                    }}
                    onChange={this.handleChange}
                    options={[
                        {
                            value: '1',
                            label: '1',
                        },
                        {
                            value: '2',
                            label: '2',
                        },
                        {
                            value: '3',
                            label: '3',
                        },
                    ]}
                />
                &nbsp;
                <Button type="primary" shape="circle" onClick={this.increment}>
                    +
                </Button>
                &nbsp;
                <Button type="primary" shape="circle" onClick={this.decrement}>
                    -
                </Button>
                &nbsp;
                <Button type="primary" onClick={this.incrementIfOdd}>
                    当前求和为奇数再加
                </Button>
                &nbsp;
                <Button type="primary" onClick={this.incrementAsync}>
                    异步加
                </Button>
            </div>
        );
    }
}

export default Index;
  • 解决方式2：在入口文件index.js中进行配置。
import React from 'react'
import ReactDOM from 'react-dom'
// fixme 在入口文件index.js中引入store
import store from './redux/store'

import App from './App'

ReactDOM.render(<App/>,document.getElementById("root"))

// 使用subscribe触发页面的刷新
store.subscribe(()=>{
    ReactDOM.render(<App/>,document.getElementById("root"))
    // 因为，有dom的diff算法，因此就算重新渲染了App组件也没事。
})

总结：
在这里插入图片描述

4. redux 完整结构补充

除了store.js 、reducer.js，还应该有action.js 和 constant.js两个文件来方便管理操作。

action.js如下：

/**
 * 该文件专门为Count组件生成action对象。
 */

import {INCREMENT,DECREMENT} from './constant'

// 简化写法：(函数返回值可以用()括号进行包裹对象来返回对象。)
export const createIncrementAction = (data) => ({type:INCREMENT,data})
export const createDecrementAction = (data) => ({type:DECREMENT,data})

constant.js如下：

/**
 * 该模块是用于定义action对象中type类型的常量值。
 * 目的只有一个：便于管理的同时防止程序员单词写错。
 */
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

在这里插入图片描述

5. redux的 异步action

redux的action有两种返回结果方式：

  • 返回Object对象的叫做同步的action。
  • 返回fucntion函数的叫做异步的action。

前提 安装 redux-thunk 插件：

yarn add redux-thunk

引入redux-thunk，用于支持异步action。

action.js文件：

/**
 * 该文件专门为Count组件生成action对象。
 */

import {INCREMENT,DECREMENT} from './constant'

// 简化写法：(函数返回值可以用()括号进行包裹对象来返回对象。)
// fixme 返回对象是同步action
export const createIncrementAction = (data) => ({type:INCREMENT,data})
export const createDecrementAction = (data) => ({type:DECREMENT,data})

// fixme 返回函数是异步action
export const createAsyncIncrementAction = (data,time) => {
    // store会传递一个dispatch参数，其实就是对应了store的dispatch函数。
    return (dispatch) => {
        setTimeout(()=>{
            console.log(data)
            // 一般异步action中会调用同步的action。
            dispatch(createIncrementAction(data))
        },time)
    }
}

在这里插入图片描述

总结：
在这里插入图片描述

6. react-redux库 与 redux库

redux是其他人开发的一款方便集中式管理状态的插件库。redux可以用到vue，react等其他项目中。

facebook也出了一版类似redux的插件工具，react-redux库。

在这里插入图片描述

UI组件 通过 父容器组件 进行操作redux。

7. react-redux库的 实战

首先，安装react-redux库。

yarn add react-redux
或者
"react-redux": "^8.0.5",

原本redux的配置文件如下：

/**
 * 该文件专门用于暴露一个store对象，整个应用只有一个store对象。
 */
// 引入createStore, 专门用于创建redux种最为核心的store对象
import {createStore,applyMiddleware} from 'redux'
// 引入为Count组件服务器的Reducer
import countReducer from './count_reducer'
// 引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
// 暴露一个store fixme 使用applyMiddleware添加插件。
export default createStore(countReducer,applyMiddleware(thunk))

action.js文件：专门用来配置action操作的。

/**
 * 该文件专门为Count组件生成action对象。
 */

import {INCREMENT,DECREMENT} from './constant'

// 简化写法：(函数返回值可以用()括号进行包裹对象来返回对象。)
// fixme 返回对象是同步action
export const createIncrementAction = (data) => ({type:INCREMENT,data})
export const createDecrementAction = (data) => ({type:DECREMENT,data})

// fixme 返回函数是异步action
export const createAsyncIncrementAction = (data,time) => {
    // store会传递一个dispatch参数，其实就是对应了store的dispatch函数。
    return (dispatch) => {
        setTimeout(()=>{
            console.log(data)
            // 一般异步action中会调用同步的action。
            dispatch(createIncrementAction(data))
        },time)
    }
}

constant.js文件：方便管理名称。

/**
 * 该模块是用于定义action对象中type类型的常量值。
 * 目的只有一个：便于管理的同时防止程序员单词写错。
 */
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

容器组件配置：

// 引入Count的UI组件
import CountUI from '../../components/Count'
// 引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
// 引入固定写法
import {createIncrementAction,createDecrementAction,createAsyncIncrementAction} from '../../redux/count_action'

/**
 *  1. mapStateToProps函数返回的是一个对象
 *  2. mapStateToProps函数返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value -- 状态
 *  3. mapStateToProps用于传递状态
 */
// state：就是store中的状态
const mapStateToProps = (state) => {
    // 返回值为对象
    return {
        count:state
    }
}
/**
 *  1. mapDispatchToProps函数返回的是一个对象
 *  2. mapDispatchToProps函数返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value -- 操作状态的方法
 *  3. mapDispatchToProps用于传递操作状态的方法
 */
// dispatch参数会传递过来。
const mapDispatchToProps = (dispatch) => {
    return {
        jia:(number)=>{
            // 通知redux执行加法
            dispatch(createIncrementAction(number))
        },
        jian: (number) => {
            dispatch(createDecrementAction(number))
        },
        jiaAsync: (number,time) => {
            dispatch(createAsyncIncrementAction(number,time))
        }
    }
}

// connect()函数返回的还是一个函数
// fixme 使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

在这里插入图片描述

正常组件：

import React, {Component} from 'react';

// 标题
import { Typography,Button,Select } from 'antd';
const { Title } = Typography;

class Index extends Component {

    selectNumber = 1

    increment = ()=>{
        const value = this.selectNumber * 1
        this.props.jia(value)
    }
    decrement = ()=>{
        const value = this.selectNumber
        this.props.jian(value)
    }
    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,1000)
    }

    // 下拉选择框事件
    handleChange = (value) => {
        console.log(`selected ${value}`);
        this.selectNumber = value
    }

    render() {
        console.log('容器组件传送过来的对象:' , this.props)
        return (
            <div>
                <Title level={2}>当前求和为：{this.props.count}</Title>
                <Select
                    defaultValue="1"
                    style={{
                        width: 120,
                    }}
                    onChange={this.handleChange}
                    options={[
                        {
                            value: '1',
                            label: '1',
                        },
                        {
                            value: '2',
                            label: '2',
                        },
                        {
                            value: '3',
                            label: '3',
                        },
                    ]}
                />
                &nbsp;
                <Button type="primary" shape="circle" onClick={this.increment}>
                    +
                </Button>
                &nbsp;
                <Button type="primary" shape="circle" onClick={this.decrement}>
                    -
                </Button>
                &nbsp;
                <Button type="primary" onClick={this.incrementIfOdd}>
                    当前求和为奇数再加
                </Button>
                &nbsp;
                <Button type="primary" onClick={this.incrementAsync}>
                    异步加
                </Button>
            </div>
        );
    }
}

export default Index;

在这里插入图片描述

App组件还需要给容器引入store：

import React, {Component} from 'react';

// fixme 此处就要引入容器组件了。
import Count from './containers/Count'
import store from "./redux/store";

class App extends Component {
    render() {
        return (
            <div>
                {/* 给容器组件传递store */}
                <Count store={store}/>
            </div>
        );
    }
}

export default App;

在这里插入图片描述

总结：
在这里插入图片描述

8. react-redux的connect 最精简写法

mapDispatchToProps最精简写法： 传入对象，赋予的是action函数并且没有调用dispatch，React会自动调用dispatch。这算是api层次的一个优化。

// 引入Count的UI组件
import CountUI from '../../components/Count'
// 引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
// 引入固定写法
import {createIncrementAction,createDecrementAction,createAsyncIncrementAction} from '../../redux/count_action'

// 编码精简操作
export default connect(
    // fixme mapStateToProps写法：(映射状态)

    state => ({count:state}),
    // fixme mapDispatchToProps一般写法：(映射操作状态的方法)
    // dispatch => ({
    //     jia:number => dispatch(createIncrementAction(number)),
    //     jian: number => dispatch(createDecrementAction(number)),
    //     jiaAsync: (number,time) => dispatch(createAsyncIncrementAction(number,time))
    // })

    // fixme mapDispatchToProps最精简写法： 虽然传入的都是函数，并且没有调用dispatch，React会自动调用dispatch
    // 这算是api层次上的精简。
    {
        jia:createIncrementAction,
        jian:createDecrementAction,
        jiaAsync:createAsyncIncrementAction
    }
)(CountUI)

总结:
在这里插入图片描述

9. react-redux的 Provider组件作用

react-redux使用之后，就不用再添加个监听redux的操作了。

在这里插入图片描述

Provider组件作用：就是可以包裹App组件，App下的容器组件自动引入了store。

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

// 引入store 和 react-redux和Provider：
import store from './redux/store'
import {Provider} from 'react-redux'


// 通过Provider组件引入store就不用一个个再引入了。
ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>
    , document.getElementById("root"))

10. react-redux 整合UI组件 和 容器组件

因为，目前是一个UI组件对应了一个容器组件，如果有多个UI组件就有多个容器组件，所以很复杂。

在这里插入图片描述

为了解决上面问题，可以将容器组件和UI组件融合为一个组件直接进行操作：

import React, {Component} from 'react';
// 引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
// 引入固定写法
import {createIncrementAction, createDecrementAction, createAsyncIncrementAction} from '../../redux/count_action'

// 标题
import {Typography, Button, Select} from 'antd';
const {Title} = Typography;

// 定义UI组件
class Count extends Component {

    selectNumber = 1

    increment = () => {
        const value = this.selectNumber * 1
        this.props.jia(value)
    }
    decrement = () => {
        const value = this.selectNumber
        this.props.jian(value)
    }
    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, 1000)
    }

    // 下拉选择框事件
    handleChange = (value) => {
        console.log(`selected ${value}`);
        this.selectNumber = value
    }

    render() {
        console.log('容器组件传送过来的对象:', this.props)
        return (
            <div>
                <Title level={2}>当前求和为：{this.props.count}</Title>
                <Select
                    defaultValue="1"
                    style={{
                        width: 120,
                    }}
                    onChange={this.handleChange}
                    options={[
                        {
                            value: '1',
                            label: '1',
                        },
                        {
                            value: '2',
                            label: '2',
                        },
                        {
                            value: '3',
                            label: '3',
                        },
                    ]}
                />
                &nbsp;
                <Button type="primary" shape="circle" onClick={this.increment}>
                    +
                </Button>
                &nbsp;
                <Button type="primary" shape="circle" onClick={this.decrement}>
                    -
                </Button>
                &nbsp;
                <Button type="primary" onClick={this.incrementIfOdd}>
                    当前求和为奇数再加
                </Button>
                &nbsp;
                <Button type="primary" onClick={this.incrementAsync}>
                    异步加
                </Button>
            </div>
        );
    }
}

// 编码精简操作
export default connect(
    // fixme mapStateToProps写法：(映射状态)

    state => ({count: state}),
    // fixme mapDispatchToProps一般写法：(映射操作状态的方法)
    // dispatch => ({
    //     jia:number => dispatch(createIncrementAction(number)),
    //     jian: number => dispatch(createDecrementAction(number)),
    //     jiaAsync: (number,time) => dispatch(createAsyncIncrementAction(number,time))
    // })

    // fixme mapDispatchToProps最精简写法： 虽然传入的都是函数，并且没有调用dispatch，React会自动调用dispatch
    // 这算是api层次上的精简。
    {
        jia: createIncrementAction,
        jian: createDecrementAction,
        jiaAsync: createAsyncIncrementAction
    }
)(Count)

优化总结：
在这里插入图片描述

11. redux的 combineReducers方法

使用redux的combineReducers方法来汇总reducer。
在这里插入图片描述
在这里插入图片描述

12. 纯函数

为什么不用push，unshift之类的函数方法：
在这里插入图片描述

纯函数：

  • 定义：就是一个函数的返回结果只依赖于它的参数,并且在执行过程中没有副作用,我们就把这个函数叫做纯函数。
  • 不会发起网络请求，不会调用输入和输出设备。不能调用Date.now()、Math.random()方法等不纯的函数方法。
  • redux的reducer函数必须是一个纯函数。
    在这里插入图片描述

13. redux 开发者工具

redux DevTools开发者工具：
在这里插入图片描述

还要引入redux-devtools-extension中的composeWithDevTools方法：
在这里插入图片描述

xupengboo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
redux开发者工具使用
qq_42490210的博客
12-28 952
redux开发者工具包 链接：https://pan.baidu.com/s/11m-rjKe9AdCSVO-Sl4m1-A 提取码：pkhw react开发者工具包 链接：https://pan.baidu.com/s/1iZQi1MRGLXZhI8OLut7Rrg 提取码：bwtw 谷歌浏览器扩展程序中选择加载已解压的扩展程序 把已经解压好的开发者工具包，加载进来。 然后在项目中运行npm i redux-devtools-extension，安装所需要的库。 ...
React学习笔记(六)Hooks
kianagrow的博客
12-23 264
React学习笔记(六)Hooks
React 学习笔记
weixin_41184962的博客
04-25 4375
1. react- 用于构建用户界面的javaScript 库react 是一个将数据渲染微HTML视图的开源 JavaScript库2. facebook开发，且开源3. 原生JavaScript 原生javaScript操作DOM繁琐、效率低（DOM-APL 操作 UI)。 使用javascript直接操作DOM,浏览器会进行大量的重绘重排。 原生JavaScript没有组件化编码方案，代码复用率低。4. react 特点 react 核心库和re
react学习笔记（完整版 7万字超详细）
qq_51986661的博客
02-09 3660
React学习笔记，适合刚开始或者对react有一定理解的更快的学习react
React学习笔记
最新发布
Vivien_CC的博客
05-31 644
React 的三大特性：数据驱动 -> 单向数据流在React中，一切皆数据。要想改变界面元素或更改DOM节点，只需修改数据即可。但不要轻易操作DOM节点。所有的数据都用state来管理，分为组件state和全局state。数据只能从State流向DOM，不能逆向更改。函数式编程(声明式编程) = 组件化 + JSX纯函数：函数的输出不受外部环境影响，同时也不影响外部环境。非纯函数：输入相同，输出不同的函数。函数的柯里化：将一个低阶函数转换为高阶函数的过程。
Redux中间件及其开发者工具
你华还是你华
04-04 1370
本文目录一、redux中间件(redux-thunk)二、redux中间件(redux-promise) 一、redux中间件(redux-thunk) redux里，action仅仅是携带了数据的普通js对象。action creator返回的值是这个action类型的对象。然后通过store.dispatch进行分发，同步的情况下一切都很完美，但是reducer无法处理异步的情况。 那么我们就需要在action和reducer中间架起一座桥梁来处理异步。这就是middleware 安装命令: npm
React 学习笔记 （一）
MC94532161的博客
12-23 127
React & typescript
React学习笔记（参考官方文档总结）
09-19
React 学习笔记 React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发，用于构建 Instagram 的网站。React 主要用于构建 UI，许多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑...
react学习笔记之state以及setState的使用
11-27
总结来说，React的状态管理和setState()方法是构建动态组件的关键。理解它们的工作原理和正确使用方式，对于编写高效且易于维护的React应用至关重要。通过善用这些机制，开发者可以创建出响应用户交互、实时更新界面...
React学习笔记之高阶组件应用
08-27
总结，React高阶组件是一种强大的工具，它提供了代码复用、组件增强以及逻辑抽象的能力。理解和熟练使用HOC是提高React开发效率的关键。通过遵循最佳实践，你可以构建出更加灵活和可维护的React应用。
ReactJS-study:React学习笔记
04-11
总结来说，ReactJS-study资源包提供了一个全面的React学习路径，涵盖了React的基本概念、组件化开发、状态管理和React Hooks的使用，以及可能的高级主题如路由和测试。通过深入研究这些材料，开发者可以系统地掌握...
React学习笔记(基础篇)
m0_54088427的博客
03-30 1943
React学习笔记(基础) 1.React介绍 ​ react由facebook公司推出，因为该公司不满足于市面上现有的前端框架，他们认为MVC只会让前端越来越复杂，因此react就诞生了，react只关注与视图层，官方对react的定位是：一个快速构建前端视图的javaScript库。 2.React的特点 虚拟DOM ​ 如果没有虚拟DOM，每次DOM改变的时候，都需要在浏览器中进行渲染。每一次DOM改变的时候，浏览器都需要重新计算CSS，进行布局处理，然后重新渲染页面，这都需要时间
react知识点总结
m0_54850467的博客
03-08 802
创建react项目 create-react-app 引入ant design react的vscode插件 Simple React Snippets 也可以使用自定义的 如何修改配置文件 1.npm run eject 暴露所有的配置文件 不可逆的，在发射前需要提交git文件 2.安装react-app-rewired 这个包需要报pakage.json中的脚本配置修改为下面代码,再在更目录下创建config-overrides.js的配置 "scripts": { "start": "r
黑马react学习笔记
09-14
黑马React学习笔记主要包括React组件生命周期和整合ESLint插件的内容。在学习React时，我们首先需要导入React和ReactDOM两个包，并且使用ReactDOM.render()方法将React元素渲染到页面中。在渲染过程中，我们可以使用各种React组件生命周期方法来控制组件的行为。同时，整合ESLint插件可以帮助我们在开发过程中规范代码风格和提高代码质量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xupengboo

你的鼓励将是我创作最大的动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值