createSignal 无虚拟 vdom 响应式数据源简单实现

背景

SolidJS

• SolidJS 达到无 Virtual DOM 特性的主要方式是采用了响应性编程原理，特别是使用了细粒度的响应系统来跟踪组件的状态变化
  • 每个状态变量都被看作是一个细粒度的响应信号。当状态变化时，只有依赖于这个状态的具体 UI 部分会被重新计算和更新。这意味着不需要额外的 Diff 步骤来比较整棵 DOM 树的变化，因为 SolidJS 已经精确地知道哪些部分需要更新
  • 无需额外的抽象层
• 在传统拥有Virtual DOM的框架（如React和Vue）中，当组件状态更新时，整个组件或部分组件会重新渲染并且生成新的 VNode 树。然后，这个新的 VNode 树会与旧的 VNode 树进行比较（Diff 过程）

实现

• 创建一个响应性数据源

// 这个函数创建一个响应性数据源
function createSignal(initialValue) {
  let value = initialValue;
  const subscribers = new Set();

  const read = () => value;
  // 写入操作时触发依赖
  const write = (newValue) => {
    if (value === newValue) return;
    value = newValue;
    subscribers.forEach((sub) => sub());
  };

  return [read, write, subscribers];
}

• 数据源变化时的副作用

const subscriptions = new Map();

function createEffect(subscribeTo, callback) {
  const effect = () => {
    cleanup(callback());
  };
  subscribeTo.add(callback);
  
  // 首次执行副作用
  effect();
}

function cleanup(effect){
	// ...
}

• 组件中使用

function Counter() {
  const [count, setCount, countSubscribers] = createSignal(0); // 创建响应性数据源

  // 创建DOM元素，并实现副作用来更新DOM
  const countElement = document.createElement('div');
  
  createEffect(countSubscribers, () => {
    countElement.textContent = `Current count is ${count()}`;
    const timer = setTimeout(() => {
    	console.log('Effect ran after 1 second');
	}, 1000);
  	  
  	// Return cleanup function
	return () => clearTimeout(timer);
  });

  // 创建按钮并绑定点击事件来改变状态
  const button = document.createElement('button');
  button.textContent = 'Increment';
  button.addEventListener('click', () => setCount(count() + 1));

  // 将元素添加到DOM中
  document.body.appendChild(countElement);
  document.body.appendChild(button);
}