原文链接:https://github.com/taoliujun/blog/issues/35
官方文档:https://docs.pmnd.rs/zustand
如何使用
Zustand 是一个非常简单粗暴的全局状态管理库,它的使用有多简单呢?如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| import { create } from 'zustand';
interface State { loading: boolean; disabled: boolean; setLoadingByAge: (value: number) => void; }
export const useFormStateStore = create<State>((set) => ({ loading: false, disabled: false, setLoadingByAge: (value) => { set({ loading: value > 10 }); }, }));
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
| import { useState, type FC } from 'react'; import { useFormStateStore } from './useFormStateStore'; import { Button } from '@/components/Button';
const Loading: FC = () => { const { loading } = useFormStateStore(); return <div>loading: {String(loading)}</div>; };
const Disabled: FC = () => { const { disabled } = useFormStateStore(); return <div>disabled: {String(disabled)}</div>; };
const Main: FC = () => { const { setLoadingByAge } = useFormStateStore(); const [age, setAge] = useState(0);
return ( <div> <Loading /> <br /> <Disabled /> <br /> <Button onClick={() => { useFormStateStore.setState({ loading: true, }); }} > set loading true </Button> <Button onClick={() => { useFormStateStore.setState({ loading: false, }); }} > set loading false </Button> <Button onClick={() => { useFormStateStore.setState({ disabled: true, }); }} > set disabled true </Button> <Button onClick={() => { useFormStateStore.setState({ disabled: false, }); }} > set disabled false </Button> <br /> <input type="number" value={age} onChange={(e) => { setAge(Number(e.target.value)); }} /> <br /> <Button onClick={() => { setLoadingByAge(age); }} > set loading by age </Button> </div> ); };
export default Main;
|
在useFormStateStore.ts
中定义了状态,然后在app.tsx
中使用,就是这么简单粗暴!这里有几点介绍下:
Zustand
使用非常简单,API也很少,它的原理是使用了Proxy
,所以它的性能非常好。
相比Redux
相比Redux,Zustand的代码非常简单明了,不需要使用connect
、mapStateToProps
、mapDispatchToProps
这些方法。
相比React Context
React Context需要一个Provider
包裹组件以传递状态,需要一个useContext
使用状态,光从层级上就让人绕起来了。而Zustand只需要一个create
方法,就可以使用了,且状态是全局的,不需要传递。