React 学习笔记总结(六)

news2024/12/23 18:06:20

文章目录

  • 1. redux 介绍
  • 2. redux 工作流程
  • 3. redux 的使用
  • 4. redux 完整结构补充
  • 5. redux的 异步action
  • 6. react-redux库 与 redux库
  • 7. react-redux库的 实战
  • 8. react-redux的connect 最精简写法
  • 9. react-redux的 Provider组件作用
  • 10. react-redux 整合UI组件 和 容器组件
  • 11. redux的 combineReducers方法
  • 12. 纯函数
  • 13. redux 开发者工具

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方法：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/147400.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

webgl图形平移、缩放、旋转

webgl图形平移、缩放、旋转

文章目录前言平移图示代码示例缩放图示代码示例旋转公式推导代码示例总结前言 在webgl中将图形进行平移、旋转、缩放的操作称为变换或仿射变换&#xff0c;图形的仿射变换涉及到顶点位置的修改&#xff0c;通过顶点着色器是比较直接的方式。本文通过着色器实现对webgl图形的仿…
阅读更多...
ArcGIS基础实验操作100例--实验65按字段调整点符号方向

ArcGIS基础实验操作100例--实验65按字段调整点符号方向

本实验专栏参考自汤国安教授《地理信息系统基础实验操作100例》一书 实验平台&#xff1a;ArcGIS 10.6 实验数据&#xff1a;请访问实验1&#xff08;传送门&#xff09; 高级编辑篇--实验65 按字段调整点符号方向 目录 一、实验背景 二、实验数据 三、实验步骤 &#xff0…
阅读更多...
计算机组成原理_总线

计算机组成原理_总线

计算机组成原理总目录总线概述 1. 总线介绍 我们知道计算机中有CPU、主存、辅存&#xff0c;以及打印机、键盘、鼠标等等的一些外设 那么各个设备之间肯定是要进行数据传输的&#xff0c;这就需要许多线路将它们连接起来 第一种方法&#xff1a;两两相联 外设数量越多&#xf…
阅读更多...
35、基于STM32的电子钟（DS1302）

35、基于STM32的电子钟（DS1302）

编号&#xff1a;35 基于STM32的电子钟&#xff08;DS1302&#xff09; 功能描述&#xff1a; 本设计由STM32单片机液晶1602按键DS1302时钟组成。 1、采用STM32F103最小系统。 2、利用DS1302芯片提供时钟信号 3、液晶1602实时显示年月日、时分秒、星期等信息。 4、三个按键可…
阅读更多...
隐形AR眼镜厂商Mojo Vision裁员75%，专注Micro LED技术

隐形AR眼镜厂商Mojo Vision裁员75%，专注Micro LED技术

1月7日青亭网报道&#xff0c;隐形AR眼镜厂商Mojo Vision官方宣布了一项重大调整&#xff0c;其中因为产品进展问题&#xff0c;同时还有融资进展受阻等面临大裁员&#xff0c;将进行一系列中心调整&#xff0c;据了解本次裁员比例高达75%。重点关注&#xff1a;1&#xff0c;M…
阅读更多...
【Day5】力扣第328题，奇偶链表

【Day5】力扣第328题，奇偶链表

前言&#xff1a; 大家好&#xff0c;我是良辰丫&#x1f680;&#x1f680;&#x1f680;&#xff0c;今天带大家刷一个力扣链表题&#xff0c;有人可能会说&#xff0c;一道题够嘛&#xff0c;刚开始刷题别着急&#xff0c;毕竟&#xff0c;心急吃不了热豆腐&#xff0c;&…
阅读更多...
Mathorcup数学建模竞赛第六届-【妈妈杯】B题：小区车位分布的评价和优化模型（附特等奖获奖论文和Java代码）

Mathorcup数学建模竞赛第六届-【妈妈杯】B题：小区车位分布的评价和优化模型（附特等奖获奖论文和Java代码）

赛题描述 随着现代社会经济的快速发展，房地产成为国家经济发展中重要的经济增长点之一。而小区内汽车停车位的分布对于小区居民的上下班出行影响很大。请建立数学模型，解决下列问题： 问题1：分析评判小区汽车停车位分布是否合理的几个关键指标，建立评判车位分布合理的数学…
阅读更多...
嵌入式Linux-对子进程的监控

嵌入式Linux-对子进程的监控

1. 进程的诞生与终止 1.1 进程的诞生 一个进程可以通过 fork()或 vfork()等系统调用创建一个子进程&#xff0c;一个新的进程就此诞生&#xff01;事实上&#xff0c;Linux系统下的所有进程都是由其父进程创建而来&#xff0c;譬如在 shell 终端通过命令的方式执行一个程序./…
阅读更多...
leetcode 1658. 将 x 减到 0 的最小操作数[python3 双指针实现与思路整理]

leetcode 1658. 将 x 减到 0 的最小操作数[python3 双指针实现与思路整理]

题目 给你一个整数数组 nums 和一个整数 x 。每一次操作时&#xff0c;你应当移除数组 nums 最左边或最右边的元素&#xff0c;然后从 x 中减去该元素的值。请注意&#xff0c;需要 修改 数组以供接下来的操作使用。 如果可以将 x 恰好 减到 0 &#xff0c;返回 最小操作数 &a…
阅读更多...
HTML与CSS基础（四）—— CSS基础（选择器进阶、Emmet语法、背景属性、元素显示模式、三大特性）

HTML与CSS基础（四）—— CSS基础（选择器进阶、Emmet语法、背景属性、元素显示模式、三大特性）

一、选择器进阶目标&#xff1a;能够理解 复合选择器 的规则&#xff0c;并使用 复合选择器 在 HTML 中选择元素1. 复合选择器1.1 后代选择器&#xff1a;空格作用&#xff1a;根据 HTML 标签的嵌套关系&#xff0c;选择父元素 后代中 满足条件的元素 选择器语法&#xff1a;选…
阅读更多...
第二章JavaWeb基础学习路线

第二章JavaWeb基础学习路线

文章目录什么是Java WebJava Web基础的技术栈关于我们的客户端与服务端&#xff08;BS&#xff09;我们客户端的形式**PC端网页****移动端**服务端应用程序关于请求&#xff08;request&#xff09;和响应(response)类比生活中的请求和响应服务器中的请求和响应项目的逻辑构成架…
阅读更多...
CSS权威指南（六）文字属性

CSS权威指南（六）文字属性

1.缩进和行内对齐 &#xff08;1&#xff09;缩进文本&#xff08;text-indent&#xff09; text-indent属性把元素的第一行文本缩进指定的长度&#xff0c;缩进的长度可以可以是负值。这个属性通常用于缩进段落的第一行。text-indent作用于块级元素之上&#xff0c;缩进将沿着…
阅读更多...
config：配置中心

config：配置中心

Spring Cloud Config 为分布式系统中的外部配置提供服务器端和客户端支持。使用 Config Server&#xff0c;您可以集中管理所有环境中应用程序的外部配置。 Spring Cloud Config就是一个配置中心&#xff0c;所有的服务都可以从配置中心取出配置&#xff0c;而配置中心又可以从…
阅读更多...
mmap（内存映射）、sendfile() 与零拷贝技术

mmap（内存映射）、sendfile() 与零拷贝技术

内存映射&#xff08;Memory-mapped I/O&#xff09;是将磁盘文件的数据映射到内存&#xff0c;用户通过修改内存就能修改磁盘文件。 RocketMQ为什么快&#xff1f;kafka为什么快&#xff1f;什么是mmap&#xff1f;这些问题都逃不过一个点&#xff0c;就是零拷贝。 虽然还有其…
阅读更多...
电脑不能开机的几个常见原因

电脑不能开机的几个常见原因

现在手机已经将电脑取代了&#xff0c;用电脑的越来越少&#xff0c;因为一些原因上网课的多了起来&#xff0c;大家都将放置几年的电脑搬了出来&#xff0c;开不开机的大有人在&#xff0c;由于机器闲置很久大多都出现了各种各样的故障和问题&#xff0c;在这里总结了电脑台式…
阅读更多...
C语言：浮点型存储方式

C语言：浮点型存储方式

浮点型存储方式 任意一个二进制浮点数V可以表示成下面的形式 (-1)^S *M *2^E 1&#xff08;S符号位&#xff09; 8&#xff08;E阶码&#xff09; 23&#xff08;M尾码&#xff09;省略首位1 S&#xff1a;表示正负 只有0/1两个值 M&#xff1a;由浮点数转化成二进制数表示 在…
阅读更多...
4.7、IPv4 数据报的首部格式

4.7、IPv4 数据报的首部格式

固定部分&#xff1a;每个 IP 数据报首部都必须包含的内容 某些 IP 数据报的首部除了包含 202020 字节的固定部分外&#xff0c;还包含一些可选的字段来增加 IP 数据报的功能 IP 数据报的首部常以 323232 个比特为单位进行描述 图中的每一行都由 323232 个比特&#xff08;也…
阅读更多...
小波分析——4.使用小波对信号成分进行分析

小波分析——4.使用小波对信号成分进行分析

文章目录首先创建一个包含多频率成分的信号然后我们用数学实现一个墨西哥草帽小波然后我们开始对原始信号进行处理吧接下来可以把信号成分进行绘制在前面的章节里已经介绍过小波的理论、公式等知识点&#xff0c;现在我们来看看如何用小波来实现对复杂信号的成分分析。 在我们…
阅读更多...
性能优化系列之『HTML5 离线化：主流的技术实现方案有哪些？』

性能优化系列之『HTML5 离线化：主流的技术实现方案有哪些？』

文章の目录一、离线包类型二、离线包架构三、离线包下载四、离线包运行模式五、大厂离线包方案写在最后一、离线包类型 全局离线包&#xff1a;包含公共的资源&#xff0c;可供多个应用共同使用私有离线包&#xff1a;只可以被某个应用单独使用 二、离线包架构 三、离线包下载…
阅读更多...
Fairness in Recommendation: A Survey 阅读笔记

Fairness in Recommendation: A Survey 阅读笔记

论文链接 搁置了许久的毕设&#xff0c;又要开始重新启航。 2022年的最后一段时间过得真是很崎岖&#xff0c;2023希望大家平安喜乐。 课设还未结束&#xff0c;但是毕设不能再拖&#xff0c;开工啦&#xff01;这又是一篇综述&#xff0c;有关推荐系统中的公平性&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023