solid原理解析

谦谦橘子
65 阅读3分钟

一. solid介绍

solid是前端框架，开发体验与React类似，使用jsx语法。本文主要解析solid与react的渲染流程差异和solid的signals机制。

solid使用示例

// App.jsx
import { createSignal } from 'solid-js'

function App() {
  const [counter, setCounter] = createSignal(0)

  return (
    <div>
      <h1 onClick={() => setCounter(s => s + 1)}>{counter()}</h1>
    </div>
  )
}

export default App


// main.js
import { render } from 'solid-js/web'
import App from './App'

const root = document.getElementById('root')

render(() => <App />, root)

二. solid原理

solid编译原理部分本文不做介绍，这里需要知道的是solid首先会编译组件方法，在编译转换的过程中有一些优化机制，核心是优化运行时的性能。

例如下面这段代码，编译转换后的结果如下

// 转换前
import { createSignal } from 'solid-js'

function Counter() {
  const [counter, setCounter] = createSignal(0)

  return (
    <div>
      <h1 onClick={() => setCounter(s => s + 1)}>{counter()}</h1>
    </div>
  )
}

export default Counter

// 转换后
const _REGISTRY = _$$registry();
var _tmpl$ = _$template(`<div><h1>`);
var Counter = _$$component(_REGISTRY, "Counter", function Counter2() {
    const [counter,setCounter] = createSignal(0);
    return ( () => {
        var _el$ = _tmpl$()
          , _el$2 = _el$.firstChild;
        _el$2.$$click = () => setCounter( (s) => s + 1);
        _$insert(_el$2, counter);
        return _el$;
    }
    )();
});
export default Counter;
_$delegateEvents(["click"]);

2.1 渲染流程

solid渲染流程中使用了虚拟DOM树，相比React，solid的虚拟DOM树更加精炼，对于一些静态的节点并不会创建其对应的虚拟DOM节点，只会创建动态节点对应的虚拟DOM节点。

例如下面这段代码，在React渲染流程中，div和两个h1标签都会创建对应的Fiber节点，但是在solid中，只会创建第二个h1标签的文本节点对应的虚拟DOM节点，所以solid构建的虚拟DOM树占用的内存开销和运行性能都比React要好得多。

<div>
  <h1>hello world</h1>
  <h1>{count}<h1>
</div>

在首次渲染中，会采用深度优先遍历算法递归创建虚拟DOM节点，且同时创建其对应的真实DOM节点，然后会将真实DOM节点插入到父DOM节点中，当整个虚拟DOM树构建完成后，会将创建好的真实DOM树插入到页面指定节点上完成首次渲染流程。

当状态更新时，会触发更新渲染，与React不同的是，solid不会重新创建新的虚拟DOM树，而是找到需要更新的虚拟DOM节点，然后执行更新逻辑。需要注意的是solid更新时机默认是同步的。

2.2 signal

solid的signal对象数据结构如下，核心关注以下属性:

  • value属性记录当前状态，例如state的初始值
  • observers属性记录依赖该signal的虚拟DOM节点，当signal状态变更时会触发observers属性记录的虚拟DOM节点更新渲染
  • comparator属性用于判断signal状态是否变更
const s = {
  value,
  observers: null,
  observerSlots: null,
  comparator: options.equals || undefined
};

signal机制本质是对订阅/发布设计模式的应用，当调用createSignal方法时会创建signal对象，对应发布者角色，而虚拟DOM节点对应订阅者角色，当访问signal对象属性时会被记录到observers属性中，当signal状态值更新时，会触发虚拟DOM节点更新渲染。

三. 总结

solid在编译阶段有一些优化机制，优化运行时的性能。在渲染流程中构建的虚拟DOM树相比React也更加精炼，当触发更新渲染时，只需要找到需要更新的虚拟DOM节点，执行其对应的更新逻辑即可。solid是一个很优秀的框架，在内存开销和运行性能上都做到了极致。

avatar
文章
阅读
粉丝