React16、18 使用 Redux
Redux 核心
Redux 介绍
Redux 是javaScript 状态容器,提供可预测化的状态管理
Redux 工作流程

Actions:对象,描述对状态进行怎样的操作
Reducer:函数,操作状态并返回新的状态
Store:存储状态的容器,JavaScript对象
View:视图,HTML页面
React 16 使用 Redux
安装
npm install --save redux
创建 store 仓库
在 src 目录下创建一个 store 文件夹,然后在文件夹下创建一个 index.js 文件
import { legacy_createStore as createStore } from "redux";
import reducer from "./reducer";const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()) // 创建数据存储仓库export default store
在 store 文件夹下创建一个 reducer.js 文件
const defaultstate = {list: [1,2,3,4,5,6],inpuValue: ''
}export default (state = defaultstate) => {return state;
}
在页面中使用
在 src 目录下创建 TodoList.js 页面
在 constructor 引入
this.state=store.getState();
使用
this.state.list
通过 dispatch 修改里面的值
store.dispatch({type: 'changeList',value: newList
})
在 reducer.js 添加对应的方法
const defaultstate = {list: [1,2,3,4,5,6],inpuValue: ''
}export default (state = defaultstate, action) => {switch(action.type) {case "changeList":return {...state,list: action.value}default:return state;}
}
在 constructor 添加 订阅Redux的状态
this.storeChange = this.storeChange.bind(this)
store.subscribe(this.storeChange)
编写storeChange方法
storeChange(){this.setState(store.getState())
}
完整代码
import React, { Component } from 'react';
import store from './store'class TodoList extends Component {constructor(props){super(props)this.state=store.getState();this.storeChange = this.storeChange.bind(this)store.subscribe(this.storeChange) }handleChange(){this.setState({inputValue:this.inputRef.value})}handleAdd() {let newList = this.state.listnewList.push(this.inputRef.value)store.dispatch({type: 'changeList',value: newList})this.setState({inputValue: ''})}handledel(index) {const list = this.state.listlist.splice(index, 1)store.dispatch({type: 'changeList',value: list})}storeChange(){this.setState(store.getState())}render() { return ( <div><div><input ref={(inputRef)=>{this.inputRef=inputRef}} value={this.state.inputValue} onChange={handleChange.bind(this)} /><button onClick={handleAdd.bind(this)}>新增</button></div>{this.state.list.map((item, index) => {return (<div key={index}><p>{item}<span onClick={() => handledel(index).bind(this)}> 删除</span></p></div>)})}</div>);}
}export default TodoList;
React 18 使用 Redux
安装、创建仓库都与16一样
使用
正常引入,用一个变量接收
import store from './store'
const state = store.getState()
使用的时候 直接state.xxx 就能使用
const items = state.list.map((item, index) => {return (<div key={index}><p>{item}<span onClick={() => handledel(index)}> 删除</span></p></div>)})
修改
一样通过 dispatch
store.dispatch({type: 'changeList',value: list
})
为了能让页面实时更新,必须手动更新
使用 react自带的 useEffect 方法,通过 subscribe 监测store更新的函数
useEffect(() => {// store.subscribe()是redux提供的,监测store更新的函数store.subscribe(() => {// 当store数据更新后执行 setUpdate() ,组件重新加载,实现界面store数据更新setUpdate({})})})
const [update,setUpdate] = useState({})
完整代码
import React, { useRef, useState, startTransition, useEffect } from 'react';
import store from './store'const TotoList = () => {const inputRef = useRef()const state = store.getState()const [update,setUpdate] = useState({})const [value, setValue] = useState('')const items = state.list.map((item, index) => {return (<div key={index}><p>{item}<span onClick={() => handledel(index)}> 删除</span></p></div>)})const handleChange = () => {startTransition(()=> {setValue(inputRef.current.value)})}const handleAdd = () => {let newList = state.listnewList.push(inputRef.current.value)store.dispatch({type: 'changeList',value: newList})setValue('')}const handledel = (key) => {const list = state.listlist.splice(key, 1)store.dispatch({type: 'changeList',value: list})}useEffect(() => {// store.subscribe()是redux提供的,监测store更新的函数store.subscribe(() => {// 当store数据更新后执行 setUpdate() ,组件重新加载,实现界面store数据更新setUpdate({})})})return (<div><div><input ref={inputRef} value={value} onChange={handleChange} /><button onClick={handleAdd}>新增</button></div>{items}</div>)
}export default TotoList;相关文章:
React16、18 使用 Redux
Redux 核心 Redux 介绍 Redux 是javaScript 状态容器,提供可预测化的状态管理 Redux 工作流程 Actions:对象,描述对状态进行怎样的操作 Reducer:函数,操作状态并返回新的状态 Store:存储状态的容器&am…...
【Python】Python运算符/部分函数对应的双下划线魔法方法
先说下Python版本:【Python 3.7.8】 以下用图片表格展示,一是防扒,二是没精力改成md格式。 还有就是内容肯定没有完全包含(而且也很难做到),像是__reduce__与py自带模块pickle有关(pickle用于对象序列化/反序列化)、sys.getsizeo…...
Macs Fan Control 1.5.16 Pro for mac风扇调节软件
Macs Fan Control是一款专门为 Mac 用户设计的软件,它可以帮助用户控制和监控 Mac 设备的风扇速度和温度。这款软件允许用户手动调整风扇速度,以提高设备的散热效果,减少过热造成的风险。 Macs Fan Control 可以在菜单栏上显示当前系统温度和…...
某技术公司技术二面面试题总结
存在一个单体架构的服务,怎么拆分为微服务的架构 将一个单体应用程序拆分成微服务架构是一个复杂的过程,需要深入的计划和实施。以下是一般的步骤和策略,可以帮助您成功地将单体应用程序拆分为微服务: 理解单体应用程序ÿ…...
初试小程序轮播组件
文章目录 一、轮播组件(一)swiper组件1、功能描述2、属性说明 (二)swiper-item组件1、功能描述2、属性说明 二、案例演示(一)运行效果(二)实现步骤1、创建小程序项目2、准备图片素材…...
Centos7 Yum安装PHP7.2
1、安装源 安装php72w,是需要配置额外的yum源地址的,否则会报错不能找到相关软件包。 php高版本的yum源地址,有两部分,其中一部分是epel-release,另外一部分来自webtatic。如果跳过epel-release的话,安装…...
2020年09月 C/C++(三级)真题解析#中国电子学会#全国青少年软件编程等级考试
C/C编程(1~8级)全部真题・点这里 第1题:铺砖 对于一个2行N列的走道。现在用12,22的砖去铺满。问有多少种不同的方式。 时间限制:3000 内存限制:131072 输入 整个测试有多组数据,请做到文件底结束。每行给出…...
30天入门Python(基础篇)——第2天:Python安装(保姆级)与IDE的认识与选择+详细安装教程
文章目录 专栏导读上一节课回顾1、Python解释器的安装查看各个版本的Python解释器①、ok,双击安装②、这里我们选择【自定义】安装, 下面的【将Python添加在环境变量】大家一定要打个勾③、点击【Next】进行下一步④、这里不建议安装在C盘, 点击【Browse】我在F盘创…...
软件测试/测试开发丨ChatGPT:带你进入智能对话的新时代
简介 人工智能时代来临 我们正处于AI的iPhone时刻。——黄仁勋(英伟达CEO) ChatGPT 好得有点可怕了,我们距离危险的强人工智能不远了。——马斯克(Tesla/SpaceX/Twitter CEO) 以上的内容说明我们现在正处于一个技术大…...
logback/log4j基本配置和标签详解
什么是logback logback 继承自 log4j,它建立在有十年工业经验的日志系统之上。它比其它所有的日志系统更快并且更小,包含了许多独特并且有用的特性。 logback.xml 首先直接上配置,我在项目过程中发现一些同时遇到需要logback文件的时候就去…...
雅思 《九分达人》阅读练习(二)
目录 雅思阅读练习 《九分达人》test3 paragraph3 1.单词含义要记准确,敏感度要上来。 2.找准定位,之后理解句子大致含义。 说说关于判断题的做题方法 关于“承认”有哪些单词 同替词汇 think 可以用什么其他单词来替换 单词 一些疑问 I have…...
[论文笔记] Gunrock: A High-Performance Graph Processing Library on the GPU
Gunrock: A High-Performance Graph Processing Library on the GPU Gunrock: GPU 上的高性能图处理库 [Paper] [Code] PPoPP’16 摘要 Gunrock, 针对 GPU 的高层次批量同步图处理系统. 采用了一种新方法抽象 GPU 图分析: 实现了以数据为中心(data-centric)的抽象, 以在结点…...
A Guide to PriorityQueue
原文链接:https://blog.csdn.net/ohwang/article/details/116934308 PriorityQueue 又叫 优先队列 注意1: PriorityQueue是用数组实现,数组大小可以动态增加,容量无限。 优先队列采用的是堆排序(默认为最小堆ÿ…...
Jenkins教程—构建多分支流水线项目
本教程向你展示如何使用Jenkins协调一个用 Node Package Manager (npm) 管理的简单 Node.js 和 React 项目, 并同时 为开发和产品环境交付不同的结果。 在开始本教程之前,建议你前往 教程概览 页面,并至少完成一个 介绍教程, 从而…...
【vxe-table】@enter.keyup.native实现在列表中回车光标向右移动聚焦及vxe-table的一些方法的使用(具体实现+踩坑篇)
需求: vxe-table表格 1、新增的时候,vxe-table第一行的第一个输入框聚焦 2、输入完成后,按回车,自动跳到同一行的下一个输入框 3、当在同一行的最后一个输入框输入完成后,按回车跳回第一个输入框并选中状态且复选框为选…...
科技资讯|苹果Vision Pro获得被动冷却系统及数字表冠控制界面专利
据patentlyapple报道,美国专利商标局正式授予苹果一项与头戴式设备(Apple Vision Pro)相关的专利11751366,该设备可以提供被动冷却系统,利用光学组件的表面来管理热量,而不会对用户显示的视觉信息产生不利影…...
【悬溺】Flyway的纯爱时刻
文章目录 文档背景你好Demo地址Flyway的CPU时刻(工作流程)她在哪Flyway的使用流程官方文档 文档背景 由于维护项目的哥们们技术水平参差不齐,长短不一。故做此篇文章。多点纯爱,这个世界需要纯爱战士! 你好 Flyway是一款开源的数据…...
Linux权限介绍
引言 Linux中有两种用户:超级用户(root)、普通用户 超级用户:在Linux中能做任何事,不受到权限的限制普通用户:会受到权限的限制超级用户的命令提示符是#,普通用户的命令提示符是$ 命令ÿ…...
git:一个本地仓库绑定多个远程的方法以及遇到的问题
绑定方法见知乎大佬:本地Git仓库关联多个远程仓库的两种方法 一般情况下,没人这么搞! 但是公司迁移git仓库阶段,xx云环境上的gitlab要有操作记录,不然影响整体评分,这就不得一个本地仓库关联了原来的仓库新…...
如何将WPS设置为默认的办公软件
很多小伙伴的电脑中有好几种办公软件,每次打开文档表格都要进行选择,有小伙伴想要将WPS设置成默认的办公软件该怎么操作呢,下面小编就给大家详细介绍一下将WPS设置为默认的办公软件的方法,有需要的小伙伴快来和小编一起看一看吧。…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)
推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...
云原生安全实战:API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关(API Gateway) API网关是微服务架构中的核心组件,负责统一管理所有API的流量入口。它像一座…...
