面试题：Solid.js响应式与函数式结合的复杂场景应用

1. 状态管理与函数式编程方式

在Solid.js中，函数式编程方式管理状态变化可借助 createSignal 和 createEffect 等核心API。

createSignal：用于创建响应式状态。例如，在一个多层嵌套组件的应用中，假设顶层组件需要管理一个用户登录状态：

import { createSignal } from 'solid-js';

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

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  return (
    <div>
      {isLoggedIn() ? <p>已登录</p> : <button onClick={handleLogin}>登录</button>}
    </div>
  );
};

状态传递与更新：在多层嵌套组件中，可通过props将状态和更新函数传递下去。比如有一个 UserProfile 子组件依赖登录状态：

const UserProfile = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn() && <p>欢迎回来！</p>}
    </div>
  );
};

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

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  return (
    <div>
      {isLoggedIn() ? <UserProfile isLoggedIn={isLoggedIn} /> : <button onClick={handleLogin}>登录</button>}
    </div>
  );
};

2. 副作用管理

使用 createEffect 处理副作用。例如，当用户登录状态改变时，需要更新本地存储：

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

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

  createEffect(() => {
    localStorage.setItem('isLoggedIn', isLoggedIn() ? 'true' : 'false');
  });

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  return (
    <div>
      {isLoggedIn() ? <p>已登录</p> : <button onClick={handleLogin}>登录</button>}
    </div>
  );
};

3. 可能遇到的问题及解决方案

问题1：嵌套组件中状态更新导致不必要的渲染
- 分析：当父组件状态更新传递给子组件，即使子组件实际依赖的状态部分未改变，也可能触发渲染。
- 解决方案：使用 Memo 组件。例如，在 UserProfile 组件外层包裹 Memo，只有当 isLoggedIn 变化时才重新渲染：

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

const UserProfile = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn() && <p>欢迎回来！</p>}
    </div>
  );
};

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

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  return (
    <div>
      {isLoggedIn() ? <Memo><UserProfile isLoggedIn={isLoggedIn} /></Memo> : <button onClick={handleLogin}>登录</button>}
    </div>
  );
};

问题2：副作用依赖管理不当
- 分析：createEffect 可能依赖多个状态，如果依赖关系处理不好，可能导致副作用执行时机或频率错误。
- 解决方案：仔细确定 createEffect 的依赖。例如，如果有多个状态 isLoggedIn 和 userData，且副作用只依赖 isLoggedIn，确保 createEffect 只在 isLoggedIn 变化时触发：

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

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = createSignal(false);
  const [userData, setUserData] = createSignal(null);

  createEffect(() => {
    if (isLoggedIn()) {
      // 仅在登录状态改变时，假设这里进行获取用户数据的副作用
      fetchUserData().then(data => setUserData(data));
    }
  });

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  return (
    <div>
      {isLoggedIn()? <p>已登录</p> : <button onClick={handleLogin}>登录</button>}
    </div>
  );
};

问题3：复杂状态逻辑处理
- 分析：多层嵌套组件和多个响应式状态交互时，状态更新逻辑可能变得复杂且难以维护。
- 解决方案：将复杂状态逻辑封装成独立函数或自定义Hook。例如，将登录逻辑封装成一个自定义Hook：

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

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

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  createEffect(() => {
    localStorage.setItem('isLoggedIn', isLoggedIn()? 'true' : 'false');
  });

  return { isLoggedIn, handleLogin };
};

const App = () => {
  const { isLoggedIn, handleLogin } = useLogin();

  return (
    <div>
      {isLoggedIn()? <p>已登录</p> : <button onClick={handleLogin}>登录</button>}
    </div>
  );
};

面试题：Solid.js响应式与函数式结合的复杂场景应用

知识考点

面试题答案

1. 状态管理与函数式编程方式

2. 副作用管理

3. 可能遇到的问题及解决方案