面试题：Solid.js中createEffect与依赖追踪的深入理解

Question

在Solid.js应用中有多个状态变量，如userInfo（包含用户姓名、年龄等信息的对象）和isLoggedIn（布尔值表示用户登录状态）。要求使用createEffect，只有当isLoggedIn变为true且userInfo中的姓名发生变化时，才触发一个函数更新页面上的用户欢迎信息。请阐述实现思路并给出核心代码。

Answer 1

实现思路

1. 利用 createEffect 来监听状态变化。
2. 在 createEffect 内部，通过依赖数组来指定需要监听的状态变量 isLoggedIn 和 userInfo.name。
3. 在回调函数中判断 isLoggedIn 是否为 true 并且 userInfo.name 是否有变化，若满足条件则执行更新页面用户欢迎信息的函数。

核心代码

import { createEffect, createSignal } from "solid-js";

// 创建状态变量
const [isLoggedIn, setIsLoggedIn] = createSignal(false);
const [userInfo, setUserInfo] = createSignal({ name: '', age: 0 });

createEffect(() => {
    const loggedIn = isLoggedIn();
    const { name } = userInfo();

    if (loggedIn && name) {
        // 这里执行更新页面用户欢迎信息的函数，例如：
        console.log(`欢迎, ${name}`);
        // 实际应用中可操作DOM或使用相关UI库更新页面展示
    }
}, [isLoggedIn, () => userInfo().name]);