面试题：Solid.js生命周期钩子在大型项目架构中的优化策略

1. 性能优化

onMount钩子：在组件挂载后执行一次性操作，避免重复渲染导致的性能开销。例如在加载地图组件时，仅在组件首次挂载时初始化地图，代码如下：

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

function MapComponent() {
  const [map, setMap] = createSignal(null);
  onMount(() => {
    const newMap = new Map(); // 假设这里是初始化地图的操作
    setMap(newMap);
  });
  return <div>{/* 地图相关的展示 */}</div>;
}

onCleanup钩子：在组件卸载时清理资源，防止内存泄漏。比如在添加了事件监听器的组件中，在卸载时移除监听器，如：

import { onMount, onCleanup } from "solid-js";

function ClickListenerComponent() {
  const handleClick = () => {
    console.log('Clicked');
  };
  onMount(() => {
    document.addEventListener('click', handleClick);
  });
  onCleanup(() => {
    document.removeEventListener('click', handleClick);
  });
  return <div>Click anywhere</div>;
}

2. 资源管理

数据获取与释放：在onMount中发起数据请求，在onCleanup中取消未完成的请求（如果支持取消的话）。例如使用fetch请求数据：

import { createSignal, onMount, onCleanup } from "solid-js";

function DataComponent() {
  const [data, setData] = createSignal(null);
  let controller;
  onMount(() => {
    controller = new AbortController();
    fetch('/api/data', { signal: controller.signal })
    .then(response => response.json())
    .then(result => setData(result));
  });
  onCleanup(() => {
    controller && controller.abort();
  });
  return <div>{data() && <p>{JSON.stringify(data())}</p>}</div>;
}

3. 代码结构优化

分离关注点：将不同功能逻辑放在不同的生命周期钩子中，提高代码可读性和可维护性。例如一个用户登录组件，在onMount中聚焦输入框，在onCleanup中处理可能的未完成登录请求：

import { onMount, onCleanup } from "solid-js";

function LoginComponent() {
  let inputRef;
  let controller;
  onMount(() => {
    inputRef = document.getElementById('login-input');
    inputRef && inputRef.focus();
    controller = new AbortController();
    // 这里可以发起登录相关的预请求等操作
  });
  onCleanup(() => {
    controller && controller.abort();
  });
  return (
    <div>
      <input id="login-input" type="text" />
      <button>Login</button>
    </div>
  );
}

不同业务场景下的设计

列表渲染场景：在列表项组件中，onMount可用于初始化动画效果等，onCleanup用于清理动画相关资源。如：

import { onMount, onCleanup } from "solid-js";

function ListItemComponent() {
  let animation;
  onMount(() => {
    animation = new Animation(); // 假设这是一个动画初始化操作
    animation.start();
  });
  onCleanup(() => {
    animation && animation.stop();
  });
  return <li>List item content</li>;
}

模态框场景：在模态框组件的onMount中可以初始化模态框的样式、绑定键盘关闭事件等，onCleanup中移除键盘关闭事件。

import { onMount, onCleanup } from "solid-js";

function ModalComponent() {
  const handleKeyDown = (e) => {
    if (e.key === 'Escape') {
      // 关闭模态框逻辑
    }
  };
  onMount(() => {
    document.addEventListener('keydown', handleKeyDown);
  });
  onCleanup(() => {
    document.removeEventListener('keydown', handleKeyDown);
  });
  return (
    <div className="modal">
      <div className="modal-content">
        <p>Modal content</p>
      </div>
    </div>
  );
}

星途面试题库

面试题：Solid.js生命周期钩子在大型项目架构中的优化策略

知识考点

面试题答案

1. 性能优化

2. 资源管理

3. 代码结构优化

不同业务场景下的设计