SolidJS响应式原理和简易实现

文章首发公众号：萌萌哒草头将军

最近有🎁，感兴趣的小伙伴快去关注我了解详情吧

完整源码公众号回复solid获得

💡相关阅读

学不完的框架，🐔啄不完的米，SolidJS，你到底爱谁？😘

演练场地址：Solid Playground

上篇文章中主要介绍了Solid JS的基本语法，分阶段粗略地介绍了一些原理（响应式原理、编译原理和运行时原理）。

接下来的几篇文章里我会详细介绍每个阶段的详细实现原理，希望可以给你的学习带来帮助。

写这篇文章的时候有很大的犹豫，担心Solid JS受众太小，文章的反响连”平平“都算不上，所以先写一篇试试水，如果真的反响平平，我会暂时放弃这个写作计划，还请见谅！

响应式原理

作为Solid JS响应式的基石，我们先看看createSignal的用法和原理。接着我们手动实现一个简易版的createSignal,

💎 万恶之源createSignal

🚗 用法

function createSignal<T>(
    initialValue: T,
    options?: { equals?: false | ((prev: T, next: T) => boolean) }
): [get: () => T, set: (v: T) => T];

Solid JS的厉害之处是，你可以定义变量是否为响应式，甚至可以定义响应式的时机。

• 🍎 仅提供initialValue时，（默认）是响应式的。

• 🍎 在options设置equals为false时不管何时都是响应式。

• 🍎 equals设置为函数，根据新值和旧值的关系来设置何时为响应式。

🚗 例子

下面这个例子仅仅在新的值大于旧的值（新增）时，才是响应式的。

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

function Counter()