useEffect 如何监控 useRef.current 里面的值发生变化(useRef不绑定dom)?

Question

useEffect 如何监控 useRef.current 里面的值发生变化(useRef不绑定dom)?

    function handleWheel(e: TKWheelEvent) {
        if (e.evt.ctrlKey) return
        e.evt.preventDefault()
        const direction = e.evt.deltaY > 0 ? -1 : 1
        const stage = e.target.getStage()!
        const oldScale = stage.scaleX()
        const pointer = stage.getPointerPosition()!

        const mousePointTo = {
            x: pointer.x / oldScale - stage.x() / oldScale,
            y: pointer.y / oldScale - stage.y() / oldScale,
        }
        const { MaxScale, MinScale } = ScaleRef.current
        const newScale =
                  direction > 0
                      ? oldScale > MaxScale
                          ? oldScale
                          : oldScale * ScaleBy
                      : oldScale < MinScale
                          ? oldScale
                          : oldScale / ScaleBy
        stage.scale({ x: newScale, y: newScale })
        ScaleRef.current = { // 这里发生了改变!
            ...ScaleRef.current,
            newScale,
        }
 
    }

    useEffect(() => {
        console.log(ScaleRef.current.newScale) 
    }, [ScaleRef.current]) // 这样不打印
    }, [ScaleRef]) // 这样不打印
    }, [ScaleRef.current.newScale]) // 这样不打印

    <ScStage ref={stageRef} onWheel={handleWheel} />

其实我是想让 ScaleRef.current.newScale发生变化的时候传给子组件,让子组件重新渲染,但是发现ScaleRef.current.newScale这玩意监听不到它的变化

Answer 1

两个误区吧：

• 尽量不要把 useEffect 当作一个 “监听器” 来使用
• useRef 保存的内容不随着组件的每次渲染而更新。在 useEffect 逻辑里，第二个参数里传 ref 相关的值，这种使用方式不太对。

解决思路：在更新 ScaleRef.current 的地方，直接写 useEffect 里的逻辑即可（有全量代码的话，视情况而定）。

Answer 2

文档说明：useRef 是用来存储那些不需要触发组件重新渲染的状态。useRef 返回的引用对象在组件的每次渲染中都是相同的，这意味着你可以在组件的任何地方安全地使用它，而不必担心引用对象会改变。同时，由于 ref.current 的值不会触发组件的重新渲染，所以它非常适合用于那些不需要更新 UI 的状态管理。

Answer 3

如果想监听变化的，还是用useState()吧