React 学习——zustand使用

devtools/2024/11/14 12:40:36/

1、安装zustand;命令:    npm install  zustand

注意:

  1. 函数参数必须返回(return)一个对象,对象内部编写状态数据和方法
  2. set 是用来修改数据的专门方法必须调用他来修改数据;两种语法(在代码中有注释)
import { create } from 'zustand'// 创建store
const useStore = create(set=>{return {count: 0,add:()=>{ set(state => ({ count: state.count + 1 })) },// sub:()=>{ set(state => ({count: state.count - 1})) }, //第一种语法,修改老数据的场景;理解为在上一个值的情况下计算sub:()=>{set({count:100})}//第二种 参数直接是一个对象;理解为直接赋值}
})
// 绑定store到组件 useStore解构拿到数据和修改数据的方法
const App = () => {const { count,add,sub } = useStore();return (<div className="home"><button onClick={add}>+</button><span>{count}</span><button onClick={sub}>-</button></div>)
}
export default App


http://www.ppmy.cn/devtools/100425.html

相关文章

清华大学强基计划五个书院来袭,致理、日新、未央、探微和行健

强基计划&#xff0c;是国家高考综合改革的一个重大举措&#xff0c;也是国家人才选拔培养机制的重大创新与探索&#xff0c;旨在招收一批有志向、有兴趣、有天赋的青年学生进行专门培养&#xff0c;为国家重大战略领域输送后备人才。换句话说就是&#xff0c;强基计划不仅仅是…

如何在不格式化的情况下解锁 Android 智能手机密码

如果您忘记密码&#xff0c;您的 Android 移动设备将锁定您。发生这种情况时&#xff0c;通常可以通过恢复出厂设置来重新获得对设备的访问权限。可悲的是&#xff0c;这将导致所有数据丢失。下面列出的是解锁锁定的Android 手机而不会丢失任何个人数据的有效方法。 Android 手…

ZooKeeper 的选举原理

ZooKeeper 可以通过两种方式实现 Master 选举&#xff0c;分别利用了 ZooKeeper 的临时节点和临时有序节点。以下是它们的具体实现方式及原理&#xff1a; 1. 基于临时节点的 Master 选举 在这种方法中&#xff0c;所有参与选举的节点会尝试在 ZooKeeper 中创建一个临时节点&…

1、.Net UI框架:Platform Uno - .Net宣传系列文章

Uno Platform 是一个开源的.NET平台&#xff0c;用于快速构建单代码库原生移动、Web、桌面和嵌入式应用程序。它允许开发者使用熟悉的C#和XAML来创建应用程序&#xff0c;实现在iOS、Android、WebAssembly以及Windows上的运行。 Uno Platform的关键特性包括&#xff1a; 1、基于…

Clickhouse和MySQL的区别以及适用业务场景

Clickhouse和MySQL的区别 ClickHouse 和 MySQL 是两种不同类型的数据库管理系统&#xff0c;它们在设计理念、数据处理方式和应用场景上有着明显的区别。 区别和特点 1.设计目标 ClickHouse ClickHouse 是一种面向分析的列式存储数据库&#xff0c;旨在处理大规模数据的高性…

华为HCIP-datacom 真题 (2024年下半年最新题库)

备考HCIP-datacom的小伙伴注意啦 2024年下半年8月份最新题库带解析,有需要的小伙伴移动至文章末 1.BGP 邻居建立过程的状态存在以下几种&#xff1a;那么建立一个成功的连接所经历的状态机顺序是 A、3-1-2-5-4 B、1-3-5-2-4 C、3-5-1-2-4 D、3-1-5-2-4 答案&#xff1a;D 解析…

Web开发:ORM框架之Freesql的入门和技巧使用小结

目录 零、官网链接 一、字段映射表 二、基础查询 1.freesql独特封装&#xff1a;between关键字查日期 2.分页&#xff08;每页 20 条数据&#xff0c;查询第 1 页&#xff09; 3.Withsql&#xff08;子查询&#xff0c;不建议&#xff09; 3.简单查询、映射查询 4.参数查…

Java笔试面试题之多线程偏门考点总结

以下一些偏门的Java多线程面试题考点&#xff1a; 特定API的深入使用&#xff1a; Semaphore 的具体应用场景和实现原理。文档中提到了Semaphore是什么&#xff0c;但没有深入探讨其在实际开发中的使用案例和细节。CyclicBarrier 和 CountDownLatch 的具体实现原理和使用场景差…