当前位置: 首页 > news >正文

zustand管理工具--React

npm i zustand

1.函数参数必须返回一个对象 对象内部编写状态数据和方法

2.set是用来修改数据的专门方法必须调用它来修改数据

import { useEffect } from "react";
import { create } from "zustand";// 1. 创建store
const goodsStore = create((set) => ({count: 1,inc: () => set((state) => ({ count: state.count + 1 })),channelList: [],// 异步方法fetchChannelList: async () => {const res = await fetch(URL);const jsonData = await res.json();set({ channelList: jsonData.data.channels });},
}));// 2. 绑定store到组件
function Counter() {const { count, inc, channelList, fetchChannelList } = goodsStore();useEffect(() => {fetchChannelList()}, [fetchChannelList])return (<div><button onClick={inc}>{count}</button><ul>{channelList.map((item) => {return <li key={item.id}>{item.name}</li>;})}</ul></div>);
}export default Counter;

3.切片模式--模块化

import { useEffect } from "react";
import { create } from "zustand";// 1. 创建store
const goodsStore = (set) => ({count: 1,inc: () => set((state) => ({ count: state.count + 1 })),
});const channelListStore = (set) => ({channelList: [],// 异步方法fetchChannelList: async () => {const res = await fetch(URL);const jsonData = await res.json();set({ channelList: jsonData.data.channels });},
});const useStore = create((...a) => ({...goodsStore(...a),...channelListStore(...a),}));// 2. 绑定store到组件
function Counter() {const { count, inc, channelList, fetchChannelList } = useStore();useEffect(() => {fetchChannelList();}, [fetchChannelList]);return (<div><button onClick={inc}>{count}</button><ul>{channelList.map((item) => {return <li>{item}</li>;})}</ul></div>);
}export default Counter;

相关文章:

zustand管理工具--React

npm i zustand 1.函数参数必须返回一个对象 对象内部编写状态数据和方法 2.set是用来修改数据的专门方法必须调用它来修改数据 import { useEffect } from "react"; import { create } from "zustand";// 1. 创建store const goodsStore create((set) …...

Elasticsearch内存分析

文章目录 Elasticsearch JVM内存由哪些部分组成Indexing BufferNode Query CacheShard Request CacheField Data CacheSegments Cache查询 非堆内存内存压力mat分析es的jvm缓存监控 Elasticsearch JVM内存由哪些部分组成 官方建议Elasticsearch设置堆内存为32G&#xff0c;因为…...

Alert警告提示(antd-design组件库)简单使用

1.Alert警告提示 警告提示&#xff0c;展现需要关注的信息。 2.何时使用 当某个页面需要向用户显示警告的信息时。 非浮层的静态展现形式&#xff0c;始终展现&#xff0c;不会自动消失&#xff0c;用户可以点击关闭。 组件代码来自&#xff1a; 警告提示 Alert - Ant Design 3…...

Linux提权方法总结

1、内核漏洞提权 利用内核漏洞提取一般三个环节&#xff1a;首先对目标系统进行信息收集&#xff0c;获取系统内核信息及版本信息 第二步&#xff0c;根据内核版本获取对应的漏洞以及exp 第三步&#xff0c;使用exp对目标进行攻击&#xff0c;完成提权 注&#xff1a;此处可…...

力扣第300题 最长递增子序列 c++ 动态规划题 附Java代码

题目 300. 最长递增子序列 中等 相关标签 数组 二分查找 动态规划 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例…...

Si3262 集成低功耗SOC 三合一智能门锁应用芯片

Si3262 是一款G度集成的低功耗 SOC 芯片&#xff0c;其集成了基于 RISC-V 核的低功耗MCU 和工作在 13.56MHz 的非接触式读写器模块。 读写器模块支持 ISO/IEC 14443 A/B/MIFARE 协议&#xff0c;支持自动载波侦测功能&#xff08;ACD&#xff09;。无需外W其他电路&#xff0c;…...

linux rsyslog介绍

Rsyslog网址&#xff1a;https://www.rsyslog.com/ Rsyslog is the rocket-fast system for log processing. It offers high-performance, great security features and a modular design. While it started as a regular syslogd, rsyslog has evolved into a kind of swis…...

项目部署之安装和配置Canal

1.Canal介绍 Canal是阿里巴巴的一个开源项目&#xff0c;基于java实现&#xff0c;整体已经在很多大型的互联网项目生产环境中使用&#xff0c;包括阿里、美团等都有广泛的应用&#xff0c;是一个非常成熟的数据库同步方案&#xff0c;基础的使用只需要进行简单的配置即可。 …...

基于Skywalking的全链路跟踪实现

在前文“分布式应用全链路跟踪实现”中介绍了分布式应用全链路跟踪的几种实现方法&#xff0c;本文将重点介绍基于Skywalking的全链路实现&#xff0c;包括Skywalking的整体架构和基本概念原理、Skywalking环境部署、SpringBoot和Python集成Skywalking监控实现等。 1、Skywalki…...

Spark Core

Spark Core 本文来自 B站 黑马程序员 - Spark教程 &#xff1a;原地址 第一章 RDD详解 1.1 为什么需要RDD 分布式计算需要 分区控制shuffle控制数据存储、序列化、发送数据计算API等一系列功能 这些功能&#xff0c;不能简单的通过Python内置的本地集合对象&#xff08;如…...

[算法日志]图论: 广度优先搜索(BFS)

[算法日志]图论&#xff1a; 广度优先搜索(BFS) 广度优先概论 ​ 广度优先遍历也是一种常用的遍历图的算法策略&#xff0c;其思想是将本节点相关联的节点都遍历一遍后才切换到相关联节点重复本操作。这种遍历方式类似于对二叉树节点的层序遍历&#xff0c;即先遍历完子节点后…...

Xilinx FPGA SPIx4 配置速度50M约束语句(Vivado开发环境)

qspi_50m.xdc文件&#xff1a; set_property BITSTREAM.GENERAL.COMPRESS TRUE [current_design] set_property BITSTREAM.CONFIG.SPI_BUSWIDTH 4 [current_design] set_property BITSTREAM.CONFIG.CONFIGRATE 50 [current_design] set_property CONFIG_VOLTAGE 3.3 [curren…...

Linux Shell和权限

目录 Shell命令及运行原理 权限 1.文件基本属性 2.文件权限值的表示方法 3.文件访问权限的相关设置方法 3.(1)chmod 组名修改 3.(2)chmod 二进制修改 3.(3)chown 3.(4)chgrp 3.(5)umask 4.目录权限 Shell命令及运行原理 Linux的操作系统&#xff0c;狭义上是…...

Git同时配置Gitee和GitHub

Git同时配置Gitee和GitHub 一、删除原先ssh密钥二、生成密钥 这里的同时配置是针对于之前配置过单个gitee或者github而言的&#xff0c;如果需要看git从安装开始的配置&#xff0c;则可以看这一篇文章 git安装配置教程 一、删除原先ssh密钥 在C盘下用户/用户名/.ssh文件下找到…...

IGP高级特性简要介绍(OSPF-上篇)

OSPF高级特性 一、OSPF_提升故障收敛及网络恢复速度 1.FRR与BFD快速恢复故障 1.1 FRR 在传统转发模式下&#xff0c;当到达同一个目的网络存在多条路由时&#xff0c;路由器总是选择最优路由使用&#xff0c;并且下发到FIB表指导数据转发。 当最优路由故障时&#xff0c;需…...

Oracle-Ogg集成模式降级为经典模式步骤

前言: Ogg集成模式降级为经典模式的场景比较少&#xff0c;因为降级为经典模式会导致无法支持压缩表同步&#xff0c;XA事务&#xff0c;多线程模式&#xff0c;PDB模式同步等功能&#xff0c;除非遇到集成模式暂时无法解决的bug或者环境不支持集成模式&#xff0c;比如DG备库环…...

链表面试OJ题(1)

今天讲解两道链表OJ题目。 1.链表的中间节点 给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 示例 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[3,4,5] 解释&#xff1a;链表只有一个…...

[极客大挑战 2019]Upload 1

题目环境&#xff1a; 根据题目和环境可知此题目是一道文件上传漏洞 编写一句话木马脚本<?php eval($_POST[shell]);?>将脚本文件更改为jpg图片文件我这里是flag.jpg上传文件并burpsuite抓包Repeater重放 报错一句话木马里面有<?字符 换一种一句话木马继续编写木马…...

OpenFeign讲解+面试题

一&#xff1a;OpenFeign是什么&#xff1f; 是一个声明式的web客户端,只需要创建一个接口,添加注解即可完成微服务之间的调用 二&#xff1a;调用微服务的方式&#xff1f; ribbon restTemplate方式调用openFeign通过接口注解的方式调用 三&#xff1a;如何使用OpenFeign&…...

嬴图 | LLM+Graph:大语言模型与图数据库技术的协同

前言 2022年11月以来&#xff0c;大语言模型席卷全球&#xff0c;在自然语言任务中表现卓越。尽管存在一系列伦理、安全等方面的担心&#xff0c;但各界对该技术的热情和关注并未减弱。 本文不谈智能伦理方面的问题&#xff0c;仅集中于Ulitpa嬴图在应用中的一些探索与实践&a…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...