面试题：Solid.js 响应式编程里副作用的控制机制及应用场景

Solid.js 响应式系统对副作用触发频率和执行顺序的控制

响应式依赖追踪：Solid.js 使用细粒度的响应式依赖追踪。当数据发生变化时，Solid.js 会精确识别哪些部分依赖于该数据。只有依赖变化数据的组件和副作用才会被标记为需要重新评估，而非整个应用重新渲染。例如，在一个待办事项列表应用中，如果仅某个待办事项的完成状态改变，只有直接依赖该完成状态的 UI 部分（如该待办事项的样式）会被标记，而不影响列表中其他无关的待办事项的 UI。
批处理：Solid.js 会自动批处理多个状态变化。如果在同一事件循环中发生多个状态更新，Solid.js 会将这些更新批量处理，仅在所有更新完成后触发一次重新渲染和副作用执行。比如，在处理一个表单提交，同时更新多个表单字段的状态时，Solid.js 会将这些状态更新视为一批，最后统一处理，避免多次不必要的重新渲染。
执行顺序：Solid.js 按照声明的顺序执行副作用。例如，在组件内部使用 createEffect 创建的副作用会在组件首次渲染后按照它们声明的先后顺序执行。如果某个副作用依赖于另一个副作用的结果，确保依赖的副作用先声明。

实际项目中优化副作用执行逻辑

防抖和节流：

场景：在搜索框输入时，频繁发起搜索请求会增加服务器压力且不必要。
实现：可以使用防抖或节流来优化。比如使用 lodash 的 debounce 函数。

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

const SearchComponent = () => {
  const [searchText, setSearchText] = createSignal('');
  const fetchSearchResults = debounce((text) => {
    // 实际的搜索请求逻辑
    console.log('Fetching results for:', text);
  }, 300);

  createEffect(() => {
    fetchSearchResults(searchText());
  });

  return (
    <input
      type="text"
      value={searchText()}
      onInput={(e) => setSearchText(e.target.value)}
    />
  );
};

条件执行：

场景：在一个用户资料编辑页面，只有当用户点击“保存”按钮后，才执行将资料更新到服务器的副作用。
实现：

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

const ProfileEditComponent = () => {
  const [name, setName] = createSignal('');
  const [isSaving, setIsSaving] = createSignal(false);

  createEffect(() => {
    if (isSaving()) {
      // 实际的保存到服务器逻辑
      console.log('Saving name:', name());
      setIsSaving(false);
    }
  });

  return (
    <div>
      <input
        type="text"
        value={name()}
        onInput={(e) => setName(e.target.value)}
      />
      <button onClick={() => setIsSaving(true)}>Save</button>
    </div>
  );
};

取消副作用：

场景：在组件卸载时，如果有正在进行的异步副作用（如网络请求），需要取消以避免内存泄漏和潜在错误。
实现：可以使用 AbortController。

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

const DataFetchComponent = () => {
  const [data, setData] = createSignal(null);
  const controller = new AbortController();

  createEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/data', { signal: controller.signal });
        const result = await response.json();
        setData(result);
      } catch (error) {
        if (error.name!== 'AbortError') {
          console.error('Fetch error:', error);
        }
      }
    };
    fetchData();
  });

  onCleanup(() => {
    controller.abort();
  });

  return (
    <div>
      {data() && <p>{JSON.stringify(data())}</p>}
    </div>
  );
};

星途面试题库

面试题：Solid.js 响应式编程里副作用的控制机制及应用场景

知识考点

面试题答案

Solid.js 响应式系统对副作用触发频率和执行顺序的控制

实际项目中优化副作用执行逻辑