react状态管理方案

zustand

优势：

• 极简的 api，较低的学习成本。只需通过 create 函数创建 store，直接定义状态和修改状态的方法，无需冗余模板。
• 更灵活的状态访问方式。支持选择性订阅（只监听需要的状态字段，减少不必要的重渲染）。const count = useStore((state) => state.count)

// src/stores/useCounter.ts

// 引入 zustand 库
import {create} from 'zustand'

type CounterState = {
    count: number,
    add: () => void
    minus: () => void
}

// 创建一个 zustand 状态管理 store
const useCounter = create<CounterState>((set) => (
    {
        count: 0,
        add: () => set((state: any) => ({count: state.count + 1})),
        minus: () => set((state: any) => ({
            count: state.count - 1
        }))

    }
))

export default useCounter

在页面上使用

import useCounter from '@/stores/useCounter'

function App() {
    const {count, add, minus} = useCounter()
    return (
        <>
            <div>
                {count}
            </div>
            <button onClick={add}>
                add
            </button>
            <button onClick={minus}>
                minus
            </button>
        </>
    )
}

jotai

// AgeAtom.ts
import {atom} from 'jotai'

export const ageAtom = atom(0)

// NameAtom.ts
import {atom} from 'jotai'
export const nameAtom = atom('')

// InfoAtom.ts
import {atom} from 'jotai'
import {ageAtom, nameAtom} from './Atom'
export const infoAtom = atom((get) => ({
    age: get(ageAtom),
    name: get(nameAtom)
}))

在页面上使用

import {useAtomValue, useSetAtom} from 'jotai'
import {infoAtom, ageAtom, nameAtom} from './Atom'
function App() {
    const info = useAtomValue(infoAtom)
    const setAge = useSetAtom(ageAtom)
    const setName = useSetAtom(nameAtom)
    return (
        <>
            <div>
                {info.age}
            </div>
            <div>
                {info.name}
            </div>
            <button onClick={() => setAge((age) => age + 1)}>+</button>
            <button onClick={() => setName((name) => name + 'hualu')}>add name</button>
        </>
    )
}

redux