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

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

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

符合预期