面试题：Solid.js 中条件渲染的常见方式及原理

Question

在 Solid.js 项目里，假设你有一个布尔变量 `isLoggedIn`，用来判断用户是否登录，现在需要根据这个变量显示不同的 UI 内容，比如用户登录时显示欢迎信息和注销按钮，未登录时显示登录和注册按钮。请描述实现这一条件渲染的常见方式，并解释其背后的原理。

Answer 1

常见实现方式

在Solid.js中，可以使用Show组件来实现条件渲染。示例代码如下：

import { Show } from 'solid-js';

function App() {
  const isLoggedIn = true; // 假设值，实际中会根据业务逻辑获取
  return (
    <div>
      <Show when={isLoggedIn}>
        <p>欢迎用户！</p>
        <button>注销</button>
      </Show>
      <Show when={!isLoggedIn}>
        <button>登录</button>
        <button>注册</button>
      </Show>
    </div>
  );
}

原理

1. Show组件的作用：Show组件是Solid.js提供的用于条件渲染的工具。它接受一个when属性，该属性为一个布尔值。当when的值为true时，Show组件的子元素会被渲染到DOM中；当when的值为false时，Show组件的子元素会从DOM中移除。
2. 响应式原理：在Solid.js中，状态（如isLoggedIn）是响应式的。当isLoggedIn的值发生变化时，依赖于它的Show组件会自动重新评估when属性的值，并根据新的值决定是否渲染其子元素。这是基于Solid.js的细粒度响应式系统，通过跟踪依赖关系，在状态变化时高效地更新DOM，避免不必要的重新渲染。