React学习08-React Redux

news2024/9/24 13:35:12

Redux

Redux理解

  • redux是一个专门用于做状态管理的JS库(不是react插件库)。
  • 可以用在React, Angular, Vue等项目中, 但基本与React配合使用。
  • 作用: 集中式管理React应用中多个组件共享的状态。
  • Redux只负责管理状态

文档

英文文档    中文文档    Github

需要使用Redux的情况

  1. 某个组件的状态，需要让其他组件可以随时拿到（共享）。
  2. 一个组件需要改变另一个组件的状态（通信）。
  3. 总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

redux工作流程

redux原理图

求和案例

GIF 2022-6-2 11-39-08.gif

纯React版

Count组件：

import React, { Component } from 'react'

export default class Count extends Component {

    state = {count: 0}

    // 加法
    increment = () => {
        const {value} = this.selectedNumber
        const {count} = this.state
        this.setState({count: count + +value})
    }
    // 减法
    decrement = () => {
        const {value} = this.selectedNumber
        const {count} = this.state
        this.setState({count: count - +value})
    }
    // 奇数时加
    incrementIfOdd = () => {
        const {value} = this.selectedNumber
        const {count} = this.state
        if (count % 2 !== 0) {
            this.setState({count: count + +value})
        }
    }
    // 异步加
    incrementAsync = () => {
        const {value} = this.selectedNumber
        const {count} = this.state
        setTimeout(() => {
            this.setState({count: count + +value})
        }, 500)
    }
    render() {
        return (
            <>
                <h1>当前求和为：{this.state.count}</h1>
                <select ref={c => this.selectedNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;&nbsp;
                <button onClick={this.incrementIfOdd}>add if odd</button>&nbsp;&nbsp;
                <button onClick={this.incrementAsync}>add async</button>
            </>
        )
    }
}

Redux精简版

两个文件，三个API，不使用Action Creator

结构

store.js用于暴露一个store对象，（整个应用只有一个store对象）

/*
该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

// 引入createStore，专门用于创建redux中最为核心的store对象
import { legacy_createStore } from 'redux'
// 引入为Count组件服务的reducer
import countReducer from './count_reducer'

export default legacy_createStore(countReducer)

xx_reducer.js用于创建一个为组件服务的reducer
reducer第一次被调用时，是store自动触发的，传递的preState是undefined

/* 
   该文件用于创建一个为Count组件服务的reducer，reducer的本质是一个函数
   reducer函数会接到两个参数，分别为：preState之前的状态、action动作对象
   reducer返回加工后的状态
 */

const initState = 0
export default function countReducer(preState=initState, action) {
    // 从action对象中获取type和data
    const { type, data } = action
    // 根据type决定如何加工数据
    switch (type) {
        case 'increment':
            return preState + data
        case 'decrement':
            return preState - data
        default:
            return preState
    }
}

Count组件

import React, { Component } from 'react'
// 引入store，用户获取redux中保存的状态
import store from '../../redux/store'

export default class Count extends Component {

    // state = {count: 0}
    state = {}

    componentDidMount() {
        // 检测redux中状态的变化，一旦变化即调用render
        store.subscribe(() => {
            this.setState({}) // 只要执行setState()，即使不改变状态数据，组件也会重新render()
        })
    }

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

也可以在index.js中检测store中状态的改变，一旦发生改变则重新渲染<App/>：

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import store from "./redux/store"

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

store.subscribe(() => {
    ReactDOM.render(<App/>, document.getElementById('root'))
})

Redux完整版

新增文件constant.js，用于管理type常量

/* 该模块用于定义action对象中type类型的常量值，便于管理同时防止单词写错 */

export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

新增文件xx_action.js，创建action对象

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

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

export const createIncrementAction = data => ({type: INCREMENT, data})

export const createDecrementAction = data => ({type: DECREMENT, data})

Count组件中这样写：

// 加法
increment = () => {
    const {value} = this.selectedNumber
    store.dispatch(createIncrementAction(+value))
}
// 减法
decrement = () => {
    const {value} = this.selectedNumber
    store.dispatch(createDecrementAction(+value))
}
// 奇数时加
incrementIfOdd = () => {
    const {value} = this.selectedNumber
    const count = store.getState()
    if (count % 2 !== 0) {
        store.dispatch(createIncrementAction(+value))
    }
}
// 异步加
incrementAsync = () => {
    const {value} = this.selectedNumber
    setTimeout(() => {
        store.dispatch(createIncrementAction(+value))
    }, 500)
}

异步action

延迟的动作不想交给组件自身，想交给action

想要对状态进行操作，但是具体的数据靠异步任务返回时，需要异步action

  • action为Object类型的一般对象：同步action
  • action为function函数：异步action

创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。异步任务有结果后，分发一个同步的action去真正操作数据。

异步action不是必须要写的，完全可以自己等待异步任务的结果后再去分发同步action。

store.js

/*
该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

// 引入createStore，专门用于创建redux中最为核心的store对象
import { legacy_createStore, applyMiddleware } from 'redux'
// 引入为Count组件服务的reducer
import countReducer from './count_reducer'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'

export default legacy_createStore(countReducer, applyMiddleware(thunk))

action.js

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

import { INCREMENT, DECREMENT } from "./constant"
// import store from "./store"

// 同步action就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type: INCREMENT, data})

export const createDecrementAction = data => ({type: DECREMENT, data})

// 异步action就是指action的值为函数，异步action中一般都会调用同步action
export const createIncrementAsyncAction = (data, time) => {
    // return () => {
    return (dispatch) => {
        setTimeout(() => {
            // store.dispatch(createIncrementAction(data))
            dispatch(createIncrementAction(data))
        }, time)
    }
}

React-Redux

将React组件与Redux尽可能地剥离，让UI组件与容器组件间通过props传递，便于项目后期的更新与维护

react-redux模型图

连接容器组件与UI组件

Count组件删除所有与redux有关的内容，作为UI组件

建立containers文件夹，存放Count的容器组件，基础代码如下：

// 引入Count的UI组件
import CountUI from '../../components/Count'

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

// 使用connect()()创建并暴露一个Count的容器组件
export default connect()(CountUI)

App组件中，引入Count的容器组件，并将store作为props传递：

import React, { Component } from 'react'
import Count from './containers/Count'
import store from './redux/store'

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

求和案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SQ9tzHnY-1672386682555)(https://s2.loli.net/2022/06/02/zOgGWyicj2IoYCx.png)]

容器组件：

// 引入Count的UI组件
import CountUI from '../../components/Count'

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

// 引入action
import { 
    createDecrementAction, 
    createIncrementAction, 
    createIncrementAsyncAction
} from '../../../src/redux/count_action'

/*
    mapStateToProps函数返回的是一个对象
    返回的对象中的key就作为传递给UI组件props的key，value作为props的value
    用于传递状态
*/
function mapStateToProps(state) {
    return {count: state}
}
/*
    mapDispatchToProps函数返回的是一个对象
    返回的对象中的key就作为传递给UI组件props的key，value作为props的value
    用于传递操作状态的方法
*/
function mapDispatchToProps(dispatch) {
    // 通知redux执行加法
    return {
        increment: data => dispatch(createIncrementAction(data)),
        decrement: data => dispatch(createDecrementAction(data)),
        incrementAsync: (data, time) => dispatch(createIncrementAsyncAction(data, time))
    }
}

// 使用connect()()创建并暴露一个Count的容器组件 - 核心
export default connect(mapStateToProps, mapDispatchToProps)(CountUI)

UI组件：

import React, { Component } from 'react'

export default class Count extends Component {

    // state = {count: 0}
    state = {}

    // 加法
    increment = () => {
        const {value} = this.selectedNumber
        this.props.increment(+value)
    }
    // 减法
    decrement = () => {
        const {value} = this.selectedNumber
        this.props.decrement(+value)
    }
    // 奇数时加
    incrementIfOdd = () => {
        const {value} = this.selectedNumber
        if (this.props.count % 2 !== 0) {
            this.props.increment(+value)
        }
    }
    // 异步加
    incrementAsync = () => {
        const {value} = this.selectedNumber
        this.props.incrementAsync(+value, 500)
    }
    render() {
        return (
            <>
                <h1>当前求和为：{this.props.count}</h1>
                <select ref={c => this.selectedNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;&nbsp;
                <button onClick={this.incrementIfOdd}>add if odd</button>&nbsp;&nbsp;
                <button onClick={this.incrementAsync}>add async</button>
            </>
        )
    }
}
  1. 明确两个概念：
    1. UI组件:不能使用任何redux的api，只负责页面的呈现、交互等
    2. 容器组件：负责和redux通信，将结果交给UI组件
  2. 如何创建一个容器组件——靠react-redux的connect函数
    • connect(mapStateToProps, mapDispatchToProps)(UI组件)
    • mapStateToProps: 映射状态，返回值是一个对象
    • mapDispatchToProps: 映射操作状态的方法，返回值是一个对象
  3. 容器组件中的store是靠props传进去的，而不是在容器组件中直接引入
  4. mapDispatchToProps也可以是一个对象

优化

简写mapDispatchToProps

mapDispatchToProps也可以写成一个对象

// 编码方式的优化
export default connect(
    state => ({count: state}),
    // mapDispatchToProps的一般写法
    /* dispatch => ({
        increment: data => dispatch(createIncrementAction(data)),
        decrement: data => dispatch(createDecrementAction(data)),
        incrementAsync: data => dispatch(createIncrementAsyncAction(data, 500))
    }) */
    // mapDispatchToProps的简写
    {
        increment: createIncrementAction,
        decrement: createDecrementAction,
        incrementAsync: createIncrementAsyncAction
    }
)(CountUI)

Provider组件

  • 使用react-redux后，index.js中不再需要监听store的改变
  • 使用Provider组件后，App组件中不再需要给组件传递store

index.js修改如下：

import React from "react"
import ReactDOM from "react-dom"
import { Provider } from "react-redux"
import App from "./App"
import store from "./redux/store"


ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('root')
)

整合UI组件与容器组件

将Count组件的UI组件与容器组件整合在一起，默认暴露容器组件

// 引入connect用于连接UI组件与redux
import { connect } from 'react-redux'
// 引入action
import { 
    createDecrementAction, 
    createIncrementAction, 
    createIncrementAsyncAction
} from '../../../src/redux/count_action'
import React, { Component } from 'react'

class Count extends Component {

    // state = {count: 0}
    state = {}

    // 加法
    increment = () => {
        const {value} = this.selectedNumber
        this.props.increment(+value)
    }
    // 减法
    decrement = () => {
        const {value} = this.selectedNumber
        this.props.decrement(+value)
    }
    // 奇数时加
    incrementIfOdd = () => {
        const {value} = this.selectedNumber
        if (this.props.count % 2 !== 0) {
            this.props.increment(+value)
        }
    }
    // 异步加
    incrementAsync = () => {
        const {value} = this.selectedNumber
        this.props.incrementAsync(+value, 500)
    }
    render() {
        return (
            <>
                <h1>当前求和为：{this.props.count}</h1>
                <select ref={c => this.selectedNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;&nbsp;
                <button onClick={this.incrementIfOdd}>add if odd</button>&nbsp;&nbsp;
                <button onClick={this.incrementAsync}>add async</button>
            </>
        )
    }
}

export default connect(
    state => ({count: state}),
    {
        increment: createIncrementAction,
        decrement: createDecrementAction,
        incrementAsync: createIncrementAsyncAction
    }
)(Count)

优化总结

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

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

  3. 使用了react-redux后不需要再自己检测redux中状态的改变，容器组件可以自动完成这个工作

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

  5. 一个组件要和redux“打交道”要经过哪几步？

    1. 定义好UI组件—不暴露

    2. 引入connect生成一个容器组件，并暴露，写法如下：

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

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

数据共享

定义一个Pserson组件，和Count组件通过redux共享数据。

编写Person组件

import React, { Component } from 'react'

export default class Person extends Component {

    addPerson = () => {
        const name = this.nameNode.value
        const age = this.ageNode.value
        console.log(name, age)
    }

    render() {
        return (
            <div>
                <input ref={c => this.nameNode = c} type="text" placeholder='输入名字' />&nbsp;
                <input ref={c => this.ageNode = c} type="text" placeholder='输入年龄' />
                <button onClick={this.addPerson}>添加</button>
                <ul>
                    <li>ming-ling</li>
                    <li>ming-ling</li>
                    <li>ming-ling</li>
                    <li>ming-ling</li>
                </ul>
            </div>
        )
    }
}

Person组件的reducer与action

/* 
   该文件用于创建一个为Person组件服务的reducer，reducer的本质是一个函数
   reducer函数会接到两个参数，分别为：preState之前的状态、action动作对象
 */

import { ADD_PERSON } from "../constant"

const initState = [{id: '001', name: 'tom', age: 18}]
export default function personReducer(preState=initState, action) {
    const {type, data} = action
    switch (type) {
        case ADD_PERSON:
            return [data, ...preState]
        default:
            return preState
    }
}

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

import { ADD_PERSON } from '../constant'

// 创建增加一个人的action对象
export const createAddPersonAction = personObj => ({type: ADD_PERSON, data: personObj})

Person组件中：

addPerson = () => {
    const name = this.nameNode.value
    const age = this.ageNode.value
    const personObj = {id: nanoid(), name, age}
    console.log(personObj)
}

完成数据共享

store.js中使用combineReducers()对reducers进行合并，combineReducers()调用时传入的对象就是redux保存的总状态对象

/*
该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

// 引入createStore，专门用于创建redux中最为核心的store对象
import { legacy_createStore, applyMiddleware, combineReducers } from 'redux'
// 引入为Count组件服务的reducer
import countReducer from './reducers/count'
// 引入为Person组件服务的reducer
import personReducer from './reducers/person'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'

// 汇总所有reducer
const allReducer = combineReducers({
    he: countReducer,
    renmen: personReducer
})

export default legacy_createStore(allReducer, applyMiddleware(thunk))

Person组件中即可取用：

import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import { connect } from 'react-redux'
import { createAddPersonAction } from '../../redux/actions/person'

class Person extends Component {

    addPerson = () => {
        const name = this.nameNode.value
        const age = this.ageNode.value
        const personObj = {id: nanoid(), name, age}
        this.props.jia(personObj)
        this.nameNode.value = ''
        this.ageNode.value = ''
    }

    render() {
        return (
            <div>
                <h3>计数为：{this.props.count}</h3>
                <h3>现在有{this.props.renshu}人</h3>
                <input ref={c => this.nameNode = c} type="text" placeholder='输入名字' />&nbsp;
                <input ref={c => this.ageNode = c} type="text" placeholder='输入年龄' />&nbsp;
                <button onClick={this.addPerson}>添加</button>
                <ul>
                    {
                        this.props.rens.map(p => {
                            return <li key={p.id}>{p.name}---{p.age}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default connect(
    state => ({rens: state.renmen, count: state.he, renshu: state.renmen.length}), // 映射状态
    {jia: createAddPersonAction} // 映射操作状态的方法
)(Person)

纯函数

纯函数是一类特别的函数: 只要是同样的输入(实参)，必定得到同样的输出(返回)，必须遵守以下一些约束：

  • 不得改写参数数据
  • 不会产生任何副作用，例如网络请求，输入和输出设备
  • 不能调用Date.now()或者Math.random()等不纯的方法

redux的reducer函数必须是一个纯函数

高阶函数

参数或返回是函数，能实现更加动态、更加可扩展的功能

  1. 定时器设置函数

  2. 数组的forEach() / map() / filter() / reduce() / find() / bind()

  3. promise

  4. react-redux中的connect函数

Redux DevTools

icon

Edge扩展下载地址

npm安装redux-devtools-extension

store.js中进行配置：export default legacy_createStore(allReducer, composeWithDevTools(applyMiddleware(thunk)))

image.png

最终完整版代码

  • 所有变量命名要规范，尽可能触发对象的简写形式

  • reducers文件夹中编写index.js专门用于汇总并暴露所有的reducer
    样的输出(返回)，必须遵守以下一些约束：

  • 不得改写参数数据

  • 不会产生任何副作用，例如网络请求，输入和输出设备

  • 不能调用Date.now()或者Math.random()等不纯的方法

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

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

相关文章

2023跨年烟花（浪漫烟花+美妙音乐+雪花飘飘）含前端源码直接下载---系列最终篇

2023跨年烟花（浪漫烟花+美妙音乐+雪花飘飘）含前端源码直接下载---系列最终篇

2023年快要到来啦&#xff0c;很高兴这次我们又能一起度过~ 特辑最终篇&#xff01;&#xff01;&#xff01; 视觉中国 目录 一、前言 二、跨年烟花 三、效果展示 四、详细介绍 五、编码实现 index.html js 六、获取代码 需要源码&#xff0c;可以私信我(⊙o⊙)&…
阅读更多...
【html实现书籍网（未完待续）】

【html实现书籍网（未完待续）】

html实现书籍网（未完待续） 前言1.直接下载文件2.简单分析3.后续工作总结前言 最近花了一些时间写了大多只有前端的书籍网，后端仅由flask进行了一下链接的跳转，主要目录有以下： static bootstrapcssfrontimgjslayuitemplates 个人页面.html主界面.html找回密码.html注册页…
阅读更多...
Redis客户端框架Redisson

Redis客户端框架Redisson

介绍 Redisson是架设在Redis基础上的一个Java驻内存数据网格&#xff08;In-Memory Data Grid&#xff09;。 Redisson在基于NIO的Netty框架上&#xff0c;充分的利用了Redis键值数据库提供的一系列优势&#xff0c;在Java实用工具包中常用接口的基础上&#xff0c;为使用者提…
阅读更多...
使用Stable Diffusion进行Ai+艺术设计(以智慧灯杆为例)

使用Stable Diffusion进行Ai+艺术设计(以智慧灯杆为例)

目录一. 安装环境二. 配置模型2.1 stable diffusion v12.2 运行并测试生成效果Stable Diffusion 是一种以 CLIP ViT-L/14 文本编码器的&#xff08;非池化&#xff09;文本嵌入为条件的潜在扩散模型。一. 安装环境 创建并激活一个合适的名为conda的环境&#xff1a;ldm conda…
阅读更多...
来自2022的年终总结，迎接新的2023

来自2022的年终总结，迎接新的2023

来自2022的年终总结&#xff0c;迎接新的2023&#x1f389;2022&#x1f389;&#x1f339;CSDN博客数据&#x1f339;2022年度也在持续原创博文&#xff0c;累计超过100篇&#xff0c;也收获了很多同学支持付费专栏订阅不断上升&#xff0c;帮助越来越多的同学学习&#x1f33…
阅读更多...
java多线程（11）：线程同步线程协作

java多线程（11）：线程同步线程协作

1 线程通信 应用场景 : 生产者和消费者问题 假设仓库中只能存放一件产品 , 生产者将生产出来的产品放入仓库 , 消费者将仓库中产品取走消费 如果仓库中没有产品 , 则生产者将产品放入仓库 , 否则停止生产并等待 , 直到仓库中的产品被消费者取走为止 如果仓库中放有产品 ,…
阅读更多...
CSS——结构和布局

CSS——结构和布局

1. 自适应内部元素的宽度max-width: min-content; 如果不给元素指定一个具体的 height&#xff0c;它就会自动适应其内容的高度。尝试对width 也实现类似的行为。 使 figure 元素能跟它所包含的图片一样宽&#xff08;图片的尺寸往往不是固定的&#xff09;&#xff0c;而且是…
阅读更多...
win10录屏文件在哪？怎么更改win10录屏保存位置

win10录屏文件在哪？怎么更改win10录屏保存位置

在我们日常使用的win10电脑是自带录屏的功能的&#xff0c;可以将一些精彩画面录屏下来&#xff1b;当录制完视频后&#xff0c;系统会自动将视频保存起来。那win10录屏文件在哪&#xff1f;怎么更改win10录屏保存位置&#xff1f;今天小编就给大家分享一下如何查看win10录屏文…
阅读更多...
智能车|直流电机、编码器与驱动器---驱动器

智能车|直流电机、编码器与驱动器---驱动器

智能车|直流电机、编码器与驱动器---驱动器驱动器TB6612FNG 电机驱动器TB6612FNG 的主要参数引脚说明驱动器 需要驱动器原因&#xff1a; 改变施加给电机电源极之间的电压来调整转速&#xff0c;手动去改变电压太过于麻烦&#xff0c;可以通过微控制器&#xff08;单片机&…
阅读更多...
ahooks中的核心hook-useRequest（上）

ahooks中的核心hook-useRequest（上）

前言 useRequest是一个异步数据管理的hooks&#xff0c;是ahooks Hooks库的核心hook&#xff0c;因为其通过插件式组织代码&#xff0c;大部分功能都通过插件的形式来实现&#xff0c;所以其核心代码行数较少&#xff0c;简单易懂&#xff0c;还可以支持我们自定义扩展功能。可…
阅读更多...
基础知识总结

基础知识总结

Java 基础 1. JDK 和 JRE 有什么区别&#xff1f; JDK&#xff1a; Java Development Kit 的简称&#xff0c;Java 开发工具包&#xff0c;提供了 Java 的开发环境和运行环境。JRE&#xff1a; Java Runtime Environment 的简称&#xff0c;Java 运行环境&#xff0c;为 Java…
阅读更多...
Android App加固原理与技术历程

Android App加固原理与技术历程

App为什么会被破-jie入侵 随着黑客技术的普及化平民化&#xff0c;App&#xff0c;这个承载我们移动数字工作和生活的重要工具&#xff0c;不仅是黑客眼中的肥肉&#xff0c;也获得更多网友的关注。百度一下“App破-jie”就有5290万条结果。 ​ 一旦App被破-jie&#xff0c;不…
阅读更多...
【图像处理】图像的锐化操作 | 边缘检测sobel算子，拉普拉斯算子，Canny算子| opencv

【图像处理】图像的锐化操作 | 边缘检测sobel算子，拉普拉斯算子，Canny算子| opencv

文章目录前言一、一阶导数算子&#xff1a;sobel算子二、二阶导数算子&#xff1a;拉普拉斯算子三.Canny算子前言 参考视频&#xff1a;opencv教程&#xff08;跟着视频敲了一遍代码&#xff09; 参考教材&#xff1a;《数字图像处理基础》 作者&#xff1a;朱虹 一、一阶导数…
阅读更多...
【unity笔记】图解 Vector3.SignedAngle()方法的返回值

【unity笔记】图解 Vector3.SignedAngle()方法的返回值

这个方法可以理解为&#xff1a;“两个向量之间的夹角&#xff08;有符号的&#xff09;”。 我会将它想象成&#xff1a;将两个向量都放在坐标原点&#xff0c;一个向量要向哪个方向旋转多少度 才能与另一个向量重合。 于是我在坐标原点放置了两个向量&#xff1a;OB和OA。 …
阅读更多...
Java Object 类

Java Object 类

Java Object 类是所有类的父类&#xff0c;也就是说 Java 的所有类都继承了 Object&#xff0c;子类可以使用 Object 的所有方法。 Object 类位于 java.lang 包中&#xff0c;编译时会自动导入&#xff0c;我们创建一个类时&#xff0c;如果没有明确继承一个父类&#xff0c;那…
阅读更多...
Python采集股票数据信息

Python采集股票数据信息

前言 今天打算来整整股票&#xff0c;简简单单的采集一些股票数据 对这个有兴趣的就一起来瞧瞧吧 准备 开发环境 & 第三方模块 解释器版本: python 3.8代码编辑器: pycharm 2021.2requests: pip install requests 爬虫pyecharts: pip install pyecharts 数据分析pandas…
阅读更多...
图像属性操作

图像属性操作

数字图像处理本质是对多维矩阵的操作。按照处理对象不同&#xff0c;可分为黑白图像处理&#xff0c;灰度图像处理&#xff0c;彩色图像处理。按照处理方法分为空间域处理和频域处理。按照策略分为全局处理和局部处理。 #一般步骤输入图像 多维数组 数组运算 图像…
阅读更多...
排序算法：堆排序，快速排序，归并排序。内附完整代码和算法思路详解。

排序算法：堆排序，快速排序，归并排序。内附完整代码和算法思路详解。

目录 一&#xff1a;堆排序 1.1&#xff1a;堆的数据结构 1.2&#xff1a;大小根堆 1.3&#xff1a;向下调整算法构建小根堆 1.4&#xff1a;堆排序思想 二&#xff1a;快速排序 2.1&#xff1a;快排单趟思想 三&#xff1a;归并排序 3.1&#xff1a;分组过程 3.2&am…
阅读更多...
JSP ssh学习管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

JSP ssh学习管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

一、源码特点 JSP ssh学习管理系统是一套完善的web设计系统&#xff08;系统采用ssh框架进行设计开发&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式 开发。开发环境为TOMCAT7.0,Mye…
阅读更多...
MMDetection框架入门教程之环境部署

MMDetection框架入门教程之环境部署

创建虚拟环境 打开Anaconda Prompt&#xff0c;创建一个新的虚拟环境mmlab。注意我这里选择了python3.6&#xff0c;因为在python3.7下出现了mmdet3d.apis中的类无法无法import的情况&#xff08;但mmdet3d可以import&#xff09;&#xff0c;暂时不清楚原因。 conda create …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023