面试题：Solid.js 在服务端渲染中如何处理状态管理

Solid.js 在状态管理方面相较于其他前端框架（如 React）的独特方式

细粒度响应式：
- React 使用虚拟 DOM 进行批处理更新，整体对比前后状态差异来决定 DOM 更新。而 Solid.js 采用细粒度响应式系统，基于跟踪依赖的方式。例如，在 Solid.js 中，当一个状态变量发生变化时，只有依赖该变量的部分会被重新渲染，而不是像 React 可能会重新渲染组件树的一部分（尽管 React 有优化机制，如 shouldComponentUpdate 等，但 Solid.js 的粒度更细）。
- 比如，有一个计数器组件，在 Solid.js 中只有显示计数器值的 DOM 元素会因计数器状态变化而更新，而在 React 中如果处理不当，可能包含计数器的整个组件及其子组件都会重新渲染。
信号（Signals）：
- Solid.js 的信号是其状态管理的核心概念。信号类似于 MobX 中的 observable，但更轻量级且与框架深度集成。信号可以是简单的状态值，也可以是派生状态。而 React 主要依赖 useState、useReducer 等 hooks 进行状态管理，没有类似 Signal 这样直接可观察且细粒度的状态原语。
- 例如，创建一个简单的信号来表示用户登录状态：

import { createSignal } from'solid-js';

const [isLoggedIn, setIsLoggedIn] = createSignal(false);

这里的 isLoggedIn 就是一个信号，它可以被其他部分观察和依赖，当 setIsLoggedIn 被调用更新信号值时，依赖 isLoggedIn 的部分会自动更新。

在 Solid.js 服务端渲染应用中设置和更新状态的示例

创建和初始化状态：

import { createSignal } from'solid-js';

function Counter() {
    const [count, setCount] = createSignal(0);
    return (
        <div>
            <p>Count: {count()}</p>
            <button onClick={() => setCount(count() + 1)}>Increment</button>
        </div>
    );
}

在上述代码中，通过 createSignal 创建了一个名为 count 的信号，并初始化为 0。setCount 是用于更新 count 值的函数。

更新状态：
- 在 Counter 组件中，当点击按钮时，onClick 事件调用 setCount(count() + 1)。这里 count() 获取当前信号的值，然后加 1 后通过 setCount 函数更新信号值，从而触发依赖 count 的 <p>Count: {count()}</p> 部分重新渲染。
派生状态：

import { createSignal, createMemo } from'solid-js';

function App() {
    const [count, setCount] = createSignal(0);
    const doubleCount = createMemo(() => count() * 2);

    return (
        <div>
            <p>Count: {count()}</p>
            <p>Double Count: {doubleCount()}</p>
            <button onClick={() => setCount(count() + 1)}>Increment</button>
        </div>
    );
}

这里通过 createMemo 创建了一个派生状态 doubleCount，它依赖于 count 信号。当 count 信号更新时，doubleCount 会自动重新计算，并且只有依赖 doubleCount 的 <p>Double Count: {doubleCount()}</p> 部分会重新渲染。

星途面试题库

面试题：Solid.js 在服务端渲染中如何处理状态管理

知识考点

面试题答案

Solid.js 在状态管理方面相较于其他前端框架（如 React）的独特方式

在 Solid.js 服务端渲染应用中设置和更新状态的示例