目录
zustand 和 valtio 和有什么区别?
参考: https://github.com/pmndrs/zustand/issues/483
主要区别在于:zustand 是不可变状态模型,而 valtio 是可变状态模型。
import create from 'zustand'
// intentionally show non-hook deep usage
const store = create(() => ({ obj: { count: 0 } }))
store.setState((prev) => ({ obj: { count: prev.obj.count + 1 } })
import { proxy } from 'valtio'
import state = proxy({ obj: { count: 0 } })
state.obj.count += 1
另一个区别是渲染优化。
import create from 'zustand'
const useStore = create(() => ({
count1: 0,
count2: 1,
}))
const Component = () => {
const count1 = useStore((state) => state.count1) // manual render optimization with selector
// ...
}
import { proxy, useSnapshot } from 'valtio'
const state = proxy({
count1: 0,
count2: 0,
})
const Component = () => {
const { count1 } = useSnapshot(state) // automatic render optimization with property access
// ...
}