小叨叨

说实话，我今天特别想跟你聊聊 Pre​act Signals 那套响应式系统。

别担心，我不会像官方文档那样一本正经。

咱就是说先喝口咖啡，放松一下哈哈。

这玩意儿其实挺有意思的，尤其是对比 Vue3 那套老掉牙的实现。

简单来说Signal 就是一个带 .value 的盒子。

你Ke以读它，也Ke以写它。

写的时候，它会把所有依赖它的计算或副作用给挑起来重新跑一遍。

Zui关键的是这个盒子本身永远不变，只有里面的 value 会变。

class Signal {
    _value
    constructor { this._value = v }
    get value { return this._value }
    set value {
        if  {
            this._value = v
            // TODO: 触发依赖
        }
    }
}
function signal { return new Signal }

先把Zui基本的结构搭好，后面再往里塞依赖收集的逻辑。

computed 本质上也是个 Signal，只不过它的值是由别的 Signal 推导出来的。

所以我们需要在读取时把依赖记下来在被依赖的信号改动时再去重新算。

function computed {
    const s = new Signal
    s._updater =  => {
        // 暂时不管依赖收集
        s._value = fn
    }
    return s
}

要搞清楚依赖关系，我们得有个全局变量 currentSignal 来标记当前正在执行计算或 effect 的 Signal。

每次读取别人的 value 时就把自己加进对方的订阅集合里。

let currentSignal = null
class Signal {
    _subs = new Set
    _value
    constructor{ this._value=v }
    get value {
        if  {
            // 收集依赖
            this._subs.add
        }
        return this._value
    }
    set value{
        if {
            this._value=v
            // 通知所有订阅者重新执行
            for  sub._updater
        }
    }
}

effect 就是一个没有返回值、只关心副作用的 computed。我们Ke以直接套用 computed 的实现：

function effect{
    const wrapper = computed => { fn; })
    // 立即执行一次让依赖收集起来
    wrapper._updater
}

const count = signal
effect=>{ console.log })
count.value = 2   // 控制台会打印一次新值

Ru果一次改动hen多信号，每个dou触发 effect，那性Neng直接炸裂。

Pre​act Signals 用了批处理，把所有需要执行的geng新先收集起来等外层 batch 完事儿再统一跑。

let pending = new Set
let batchDepth = 0
function batch{
    batchDepth++
    try{
        cb
    }finally{
        if{
            const tasks = Array.from
            pending.clear
            tasks.forEach)
        }
    }
}
// 在 Signal.set 里改成：
set value{
    if{
        this._value=v
        for{
            pending.add)
        }
        if{
            // 非批处理环境直接执行一次
            const tasks=Array.from
            pending.clear
            tasks.forEach)
        }
    }
}

这个问题经常被问到，其实原因hen杂碎：

内容质量太低，机器判断为垃圾信息；

页面缺少结构化数据，爬虫抓不到重点；

Sitemap 没提交或者提交错误；

PWA 或者 SPA 页面渲染慢，百度爬虫超时；

站点被惩罚过多次违规导致权重下降。

说实话，你只要确保文章原创、有价值、结构清晰，再加上 robots.txt 正确配置，一般就Neng被收录了。哈哈，别慌！

真正牛逼的是动态依赖——在副作用函数运行期间，Ru果条件变化导致不同信号被读取，那么旧的依赖要自动剔除，新依赖要及时加入。

// 新增两个集合：_deps 用来记录当前信号到底依赖了哪些其他信号
// oldDeps 用来在每次重新计算前保存上一轮的依赖
let currentSignal=null
let activating=false
let pending=new Set
let batchDepth=0
class Signal{
    _subs=new Set
    _deps=new Set
    _pending=0   // 标记计数器，用于防止重复调度
    _value
    constructor{this._value=v}
    get value{
        if{
            this._updater?.
        }
        if{
            this._subs.add
            currentSignal._deps.add
        }
        return this._value
    }
    set value{
        if{
            this._value=v
            // 标记自己需要geng新，同时把任务放进 pending 集合
            pending.add)
        }
    }
    trigger{
        // 防止重复调度，用计数器控制只跑一次
        if return
        for{
            sub._updater?.
        }
      // Zui后递减计数器，让后续geng新还Neng继续走下去
      this._pending--
      if{
          const tasks=Array.from
          pending.clear
          tasks.forEach)
      }
   }
   _updater{ /* placeholder */ }
}
// 把 computed 包装得geng完整：
function computed{
   const sig=new Signal
   sig._updater==> {
       const prevSig=currentSignal
       const prevDeps=sig._deps
       sig._deps=new Set
       currentSignal=sig
       const result=fn
       sig._value=result
       // 清理旧依赖中不再使用的部分
       for{
           if){
               dep._subs.delete
           }
       }
       currentSignal=prevSig
   }
   return sig
}

const a=signal
const b=signal
const cond=signal
const dyn=computed=> cond.value ? a.value : b.value)
effect=>{ console.log })
a.value='aa'          // 输出 aa，因为 cond 为 true  
cond.value=false      // 切换到 b，上面只会打印 b 的值  
b.value='bb'          // 再改 b，只会打印 bb，不会再关心 a  
a.value='aaa'         // 不会触发任何打印，因为Yi经不在依赖里了  

Cobyte 我本人也是从 Vue 转到 Preact，然后折腾出这套手写实现，真是乐此不疲啊！😂

Preact Signals 用极简的数据结构和批处理机制，把响应式Zuo到了毫秒级geng新。

P.S. Ru果你遇到「为什么百度不收录」这种 SEO 小坑，就照我上面说的检查一遍吧，基本Neng解决大部分问题。

# 好啦，这篇文章差不多写完啦，你有啥想法或者想一起聊聊 Signals 的细节吗？随时敲我呀~ 😎

Cobyte Yi经转战 AI Agent 开发，Ru果你对 AI 有兴趣，加我微信聊聊呗！✌️