微能力者恶魔网站谁做的,建设网站地图素材,shopex网站,王烨画家zustand 是一个用于React应用的简单、快速且零依赖的状态管理库。它使用简单的钩子#xff08;hooks#xff09;API来创建全局状态#xff0c;使得在组件之间共享状态变得容易。 React学习Day10
基本用法 安装#xff1a;首先#xff0c;你需要安装zustand库。 npm insta…zustand 是一个用于React应用的简单、快速且零依赖的状态管理库。它使用简单的钩子hooksAPI来创建全局状态使得在组件之间共享状态变得容易。 React学习Day10
基本用法 安装首先你需要安装zustand库。 npm install zustand创建一个状态存储使用createStore函数来创建一个新的状态存储。 设置初始状态你可以提供一个对象作为初始状态对象的每个属性都将成为状态的一部分。 定义状态更新函数这些函数可以修改状态存储中的状态。 使用状态在组件中使用useStore钩子来访问和更新状态。
代码示例
以下是一个使用zustand的基本示例
store / user.tsx 中创建一个状态
import { create } from zustand;interface Store {count: number;inc: (num: number) void;
}
// 这里的 Store 表示 create 函数接受一个泛型参数这个参数是 Store 接口的类型。
const createUserStore createStore((set) {return {count: 0,inc: (num: number) {set((state) ({ count: state.count num }));},};
});export default createUserStore;在组件中使用这个状态 component / Son.tsx
import React from react;
import createUserStore from ../store/user; // 引入interface SonProps {data: number; changeFatherMoney: (data: number) void;
}const Son: React.FCSonProps ({ data, changeFatherMoney }) {const { count, inc } createUserStore(); // 导出return (div style{{ border: 1px red solid }}div用户信息counter:{count}/divbuttononClick{() {inc(10);}}10/buttonp这里是子组件/p父亲的数据是{data}button onClick{() changeFatherMoney(data - 1)}用父亲一块钱/button/div);
};export default Son泛型介绍
在TypeScript中Store 是一个泛型参数的表示方式。这里的 Store 表示 create 函数接受一个泛型参数这个参数是 Store 接口的类型。
泛型在TypeScript中是一种强大的方式允许你为函数、接口或类定义类型参数这些参数在定义时不必指定具体的类型而是在使用时指定。这样做可以提高代码的复用性和灵活性。
在你给出的示例中
interface Store {count: number;inc: (num: number) void;
}const createUserStore createStore((set) {return {count: 0,inc: (num: number) {set((state) ({ count: state.count num }));},};
});这里的Store泛型规定了create的返回值类型返回的状态存储对象的类型而不是用来规定参数类型。
interface Store 定义了一个接口其中包含一个 count 属性和一个 inc 方法。createStore 是 zustand 的 create 函数它被调用时使用了泛型参数 Store。这意味着 create 函数将创建一个状态存储其形状state shape将由 Store 接口定义。createUserStore 是一个函数当调用时会返回一个符合 Store 接口的状态存储实例。
为什么在 Zustand 中使用泛型而不是接口
在 Zustand 的 create 函数中泛型不仅用于指定返回值的类型还用于定义函数内部 set 方法的参数类型等这比单独使用接口来定义返回值类型更具优势。
示例代码
import { create } from zustand;interface Store {count: number;inc: (num: number) void;
}const createUserStore createStore((set) {return {count: 0,inc: (num: number) {set((state) ({ count: state.count num }));},};
});解释 泛型的作用 createStore 中的 Store 泛型不仅指定了 createUserStore 的返回值类型也规定了回调函数参数 set 的类型。set 函数的类型定义需要知道 Store 的结构以便 TypeScript 可以正确推断 set 中 state 的类型。 接口的局限性 如果只使用接口来定义返回值类型会失去对 set 函数类型的类型推断和约束。接口无法单独定义 create 函数返回的回调函数 set 的参数类型。
示例如果只用接口定义返回值类型
如果只用接口定义返回值类型无法涵盖 set 函数类型的约束
const createUserStore create((set: (fn: (state: Store) Store) void) {return {count: 0,inc: (num: number) {set((state) ({ count: state.count num }));},};
} as Store);这种方式缺乏泛型提供的灵活性和类型推断能力代码变得不那么优雅类型定义也不那么清晰。
总结
泛型用途广泛泛型不仅可以规定返回值类型还可以用于函数参数、类属性和方法、接口属性和方法、类型别名等。Zustand 中使用泛型的优势在 Zustand 的 create 函数中使用泛型不仅规定了返回值类型还涵盖了内部回调函数 set 的参数类型约束使代码更加类型安全和简洁。接口的局限性仅使用接口来定义返回值类型无法对函数参数类型进行全面约束失去了泛型提供的类型推断能力。
通过使用泛型你可以使代码更具通用性、灵活性和类型安全性特别是在处理复杂的类型结构时。
调试工具
npm i simple-zustand-devtools -D
import create from zustand// 导入核心方法
import { mountStoreDevtool } from simple-zustand-devtools// 省略部分代码...// 开发环境开启调试
if (process.env.NODE_ENV development) {mountStoreDevtool(channelStore, useChannelStore)
}export default useChannelStore 注意事项
zustand的状态存储是单一的意味着所有组件共享相同的状态副本。状态更新是响应式的组件会在状态变化时重新渲染。状态存储的创建应该是一次性的通常在单独的文件中进行然后被多个组件导入和使用。
zustand是一个轻量级的状态管理解决方案特别适合中小型项目或者需要快速设置全局状态的场景。
