Valtio里怎么监听某个状态的变化？

公孙景苑提问于 2026-03-17 12:43:36 阅读 31

框架

我用Valtio做状态管理，现在想在某个值变化时执行副作用，比如发请求或者打日志。试过直接在组件里写useEffect(() => { ... }, [proxy.value])，但发现依赖数组里的值根本不会触发更新，组件根本不重新渲染。

是不是得用它自带的subscribe？但我看文档有点懵，不知道该怎么正确订阅单个字段。下面是我现在的写法：

import { proxy, useSnapshot } from 'valtio'

const state = proxy({ count: 0, name: 'foo' })

function MyComponent() {
  const snap = useSnapshot(state)
  
  useEffect(() => {
    console.log('count changed:', snap.count)
  }, [snap.count]) // 这个好像不生效？

  return <div>{snap.count}</div>
}

到底该怎么监听 Valitio 里某个属性的变化啊？

Valtio 状态管理

我来解答赞 5 收藏

反馈

2 条解答

圣哲 Lv1

试试这个方法。Valtio 的 useSnapshot 返回的是一个快照对象，虽然组件会因为快照的变化而重新渲染，但直接在 useEffect 的依赖数组里用 snap.count 并不会按预期工作。你需要用 Valtio 提供的 subscribe 方法来监听特定属性的变化。

你可以这样做：

import { proxy, subscribe } from 'valtio'

import { useEffect } from 'react'



const state = proxy({ count: 0, name: 'foo' })



function MyComponent() {

  useEffect(() => {

    const unsubscribe = subscribe(

      state,

      (ops) => {

        // 检查操作是否影响了 count 属性

        if (ops.some(op => op.path.length === 1 && op.path[0] === 'count')) {

          console.log('count changed:', state.count)

        }

      },

      { sync: true }

    )



    // 清理函数，防止内存泄漏

    return () => unsubscribe()

  }, [])



  return <div>{state.count}</div>

}

这样，当 state.count 发生变化时，subscribe 回调会被触发，你就可以在其中执行副作用操作了。记得返回 unsubscribe 函数以清理订阅。

2026-03-25 11:08

❤俊贺 Lv1

你的问题在于snap.count从Proxy对象里提取出来后就变成原始值了，useEffect的依赖数组根本检测不到变化。

Valtio监听变化要用subscribe，不是useEffect的依赖数组。正确写法：

import { proxy, useSnapshot, subscribe } from 'valtio'



const state = proxy({ count: 0, name: 'foo' })



function MyComponent() {

  const snap = useSnapshot(state)

  

  useEffect(() => {

    const unsub = subscribe(state, () => {

      // 这里写你的副作用逻辑

      console.log('count变化了:', state.count)

      // 发请求之类的操作放这里

    }, { path: ['count'] }) // 关键：path选项只监听count字段

    

    return unsub

  }, [])

  

  return {snap.count}


}

{ path: ['count'] }这个参数很重要，它让subscribe只监听count的变化，避免每次state里任意字段变化都触发回调，性能上会好很多。

如果你想同时监听多个字段，比如count和name，可以写成{ path: ['count', 'name'] }。

另外提一嘴，你如果直接用snap.count做依赖不行，但Valtio 2.x支持了解构语法const { count } = snap这样是响应式的，你可以试试。不过副作用监听还是用subscribe更直观。

2026-03-17 16:02