面试题：Solid.js 条件渲染中如何有效管理不同状态下的 DOM 元素更新

在 Solid.js 构建交互式界面时，假设存在一个根据用户权限显示不同菜单的场景。用户权限有 'admin'、'user' 两种，'admin' 能看到 '管理用户'、'管理系统设置' 等菜单，'user' 只能看到 '个人资料'、'我的订单' 等菜单。请用 Solid.js 实现这个条件渲染逻辑，并说明如何确保 DOM 元素在权限切换时能正确更新且不产生不必要的重渲染。

28.4万热度

难度

前端开发Solid.js

Solid.js 实现条件渲染逻辑：

首先，创建一个 Solid.js 项目并引入必要的库。假设使用 createSignal 来管理用户权限状态。

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

const App = () => {
    const [userRole, setUserRole] = createSignal<'admin' | 'user'>('user');

    const renderMenu = () => {
        if (userRole() === 'admin') {
            return (
                <ul>
                    <li>管理用户</li>
                    <li>管理系统设置</li>
                </ul>
            );
        } else {
            return (
                <ul>
                    <li>个人资料</li>
                    <li>我的订单</li>
                </ul>
            );
        }
    };

    return (
        <div>
            <button onClick={() => setUserRole(userRole() === 'admin'? 'user' : 'admin')}>切换权限</button>
            {renderMenu()}
        </div>
    );
};

render(() => <App />, document.getElementById('app'));

确保 DOM 元素在权限切换时能正确更新且不产生不必要的重渲染：
- 在 Solid.js 中，createSignal 创建的信号是响应式的。当 userRole 信号的值发生变化时，依赖它的部分（这里是 renderMenu 函数返回的 JSX）会重新计算并更新 DOM。
- Solid.js 采用细粒度的响应式系统，只有依赖该信号的部分会更新，而不是整个组件树。例如，这里只有菜单部分会更新，而页面上其他不依赖 userRole 信号的元素不会重新渲染，从而避免了不必要的重渲染。同时，Solid.js 的虚拟 DOM 机制也会高效地对比新旧 DOM 结构，只对实际变化的部分进行 DOM 操作，进一步优化性能。

面试题：Solid.js 条件渲染中如何有效管理不同状态下的 DOM 元素更新

知识考点

面试题答案