valtio基于Proxy代理比redux\zustand更简洁的react状态管理库

Valtio基于Proxy实现响应式状态管理，当状态发生变化时，能够自动触发组件的重新渲染。

而Redux需要手动触发dispatcher通知其它组件状态变化，通过创建actions、reducers和store，并结合react-redux库使用Provider、connect/useSelector、useDispatch等，相对繁琐。而valto则非常简洁：

1. 我们创建了一个含有 projects 的 store:

import { proxy } from 'valtio'

type ProjectStore = {
 projects: Project[]
}

export const projectStore = proxy<ProjectStore>({
 projects: []
})

2. 在某处更新这个store

import { projectStore } from '@/Stores/ProjectStore'

export const ProjectList = () => {
 const getProjectsHandler = () => {
   getAllProjects()
     .then(resData => {
       projectStore.projects = resData.data
     })
 }

 return (
   ...
 )
}

3. 则通过 useSnapshot 使用这个状态的组件，会自动更新

import { useSnapshot } from 'valtio'
import { projectStore } from '@/Stores/ProjectStore'

export const Sidebar = () => {
 const { projects } = useSnapshot(projectStore)

 ...

Valtio通过细粒度的状态管理和Proxy机制，提供了更好的性能表现，只重新渲染受影响的组件。Redux在大型应用中可能会遇到性能问题，特别是当多个组件订阅同一状态时。
Valtio允许开发者更灵活地订阅状态的变化。