Solid.js 自动依赖追踪，响应式原理

weixin_45051415

已于 2023-02-18 17:25:53 修改

阅读量380

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 typescript

于 2023-02-13 17:33:40 首次发布

本文链接：https://blog.csdn.net/weixin_45051415/article/details/129013400

文章提供了一个简单的Reactive函数实现，用于解释监听和更新值变化的概念。通过创建subscribeList数组存储回调函数，当值改变时触发回调。S函数用于设置和执行监听器。在给定的测试用例中，a和b的改变会触发监听器打印相应更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上貌似没有比较简单的解析，虽然原理并不难，但是跟着源码绕圈子的话多半得想一会还有可能绕晕，我在这里写一个简单版方便各位理解思路

let Listener: (() => void) | null

function Reactive<T>(value: T) {
    const subscribeList: Array<() => void> = []
    return (val?: T) => {
        if (val) {
            value = val
            subscribeList.forEach(f => f())
        }
        else {
            if (Listener) subscribeList.push(Listener!)
            return value
        }
    }
}

function S(fun: () => void) {
    Listener = fun
    fun()
    Listener = null
}

进行测试

const a = Reactive(1)
const b = Reactive("")

S(() => console.log(`log if a or b changed,now a=${a()} b=${b()}`))

setTimeout(() => { a(20) }, 1000)
setTimeout(() => { b("test") }, 2000)

控制台依次显示

log if a or b changed,now a=1 b=
log if a or b changed,now a=20 b=
log if a or b changed,now a=20 b=test

符合预期