zustand状态管理器使用汇总

本文主要是介绍zustand状态管理器使用汇总，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 初步使用介绍

// 1. 安装zustand
npm install zustand// 2. 创建store使用
import { create } from "zustand";
export const useBearStore = create((set) => ({bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }),
}));// 3. 组件内使用
import {useBearStore} from './store/index.js';function App() {// 不建议的写法：（除非状态都要使用到，否则建议使用下方写法，理由是会一直触发渲染导致性能差）// const {bears, increasePopulation} = useBearStore();// 支持写法const bears = useBearStore(state => state.bears);const increasePopulation = useBearStore(state => state.increasePopulation);const handleClick = () => {increasePopulation();}return (<div className="App">{bears}<button onClick={handleClick}>按钮</button></div>);
}export default App;

2. zustand内get与set使用

// 1. store
import { create } from "zustand";
export const useBearStore = create((set, get) => ({bears: 0,count: 0,increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),increaseCount: () => set((state) => ({ count: state.count + 1 })),removeAllBears: () => set({ bears: 0 }),total: () => {// get()可以获取到state状态里的数据return get().bears + get().count}
}));// 2. 组件使用import { useBearStore } from './store/index.js';function App() {const bears = useBearStore(state => state.bears);const count = useBearStore(state => state.count);// 使用set使bears+1const increasePopulation = useBearStore(state => state.increasePopulation);// 使用set使count+1const increaseCount = useBearStore(state => state.increaseCount);// 使用get获取bears+countconst total = useBearStore(state => state.total);const handleClickBears = () => {increasePopulation();}const handleClickCount = () => {increaseCount();}return (<div className="App"><div>{bears}</div><div>{count}</div><button onClick={handleClickBears}>按钮bears</button><button onClick={handleClickCount}>按钮count</button>{/* 汇总 */}<div>{total()}</div></div>);
}export default App;

3. selector使用

// 1. 创建一个ts文件
import { StoreApi, UseBoundStore } from 'zustand'type WithSelectors<S> = S extends { getState: () => infer T }? S & { use: { [K in keyof T]: () => T[K] } }: neverconst createSelectors = <S extends UseBoundStore<StoreApi<object>>>(_store: S
) => {let store = _store as WithSelectors<typeof _store>store.use = {}for (let k of Object.keys(store.getState())) {;(store.use as any)[k] = () => store((s) => s[k as keyof typeof s])}return store
}export default createSelectors;// 2. store使用
import { create } from "zustand";
import createSelectors from './index.ts';// 在store内使用
export const useBearStore = createSelectors(create((set, get) => ({bears: 0,count: 0,increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),increaseCount: () => set((state) => ({ count: state.count + 1 })),removeAllBears: () => set({ bears: 0 }),total: () => {// get()可以获取到state状态里的数据return get().bears + get().count}
})));// 3. 组件内使用，提高性能
import { useBearStore } from './store/index.js';// count发生改变时这个组件才会渲染， 否则不会， 增加性能
function Child() {const count = useBearStore(state => state.count);return (<div><div>{count}</div><div>{Math.random()}</div></div>)
}// 单独在组件内使用这个selectore
function Some() {const { bears, count } = useBearStore();const increasePopulation = useBearStore.use.increasePopulation();const increaseCount = useBearStore.use.increaseCount();const handleClickBears = () => {increasePopulation();}const handleClickCount = () => {increaseCount();}return (<div className="App"><div>{bears}</div><div>{count}</div><button onClick={handleClickBears}>按钮bears</button><button onClick={handleClickCount}>按钮count</button></div>);
}// 一定要封装独立组件， 否则使用后也会重复渲染
function App() {return (<div className="App"><Some /><Child /></div>);
}export default App;

这篇关于zustand状态管理器使用汇总的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---