面试题：Solid.js 组件生命周期深度剖析与自定义Hooks的高级应用

1. 子组件选择性跳过重新渲染

在 Solid.js 中，可以利用 createMemo 和 createEffect 来实现子组件选择性跳过不必要的重新渲染。

createMemo：它可以创建一个记忆值，只有当依赖项发生变化时才会重新计算。对于深层子组件，可以将其接收的属性或状态作为依赖项传递给 createMemo。如果这些依赖项没有变化，子组件就不会重新渲染。

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

const Parent = () => {
  const [count, setCount] = createSignal(0);
  return (
    <div>
      <button onClick={() => setCount(count() + 1)}>Increment</button>
      <DeepChild memoizedProp={createMemo(() => count())} />
    </div>
  );
};

const DeepChild = ({ memoizedProp }) => {
  return <div>{memoizedProp()}</div>;
};

createEffect：如果子组件有副作用操作，可以使用 createEffect 来管理。它会在依赖项变化时运行副作用，而不会触发组件重新渲染。例如，当子组件需要根据某些状态变化执行数据获取等操作时，就可以使用 createEffect。

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

const DeepChild = () => {
  const [data, setData] = createSignal(null);
  const [loading, setLoading] = createSignal(false);
  const someValue = createSignal(0);

  createEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setData('Some data');
      setLoading(false);
    }, 1000);
  }, [someValue()]);

  return (
    <div>
      {loading()? <p>Loading...</p> : <p>{data()}</p>}
    </div>
  );
};

2. 基于 Solid.js 响应式原理创建通用自定义 Hook

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

const useAsyncOperation = (operations, options = {}) => {
  const { autoRetry = 3, retryDelay = 1000 } = options;
  const [loading, setLoading] = createSignal(false);
  const [error, setError] = createSignal(null);
  const [progress, setProgress] = createSignal(0);
  const [results, setResults] = createSignal([]);

  const runOperations = async () => {
    setLoading(true);
    let currentRetry = 0;
    let allSuccess = true;
    const operationResults = [];
    try {
      for (let i = 0; i < operations.length; i++) {
        const operation = operations[i];
        setProgress((i / operations.length) * 100);
        try {
          const result = await operation();
          operationResults.push(result);
        } catch (opError) {
          allSuccess = false;
          if (currentRetry < autoRetry) {
            await new Promise(resolve => setTimeout(resolve, retryDelay));
            currentRetry++;
            i--;
          } else {
            throw opError;
          }
        }
      }
      if (allSuccess) {
        setResults(operationResults);
      }
    } catch (mainError) {
      setError(mainError);
    } finally {
      setLoading(false);
    }
  };

  createEffect(() => {
    runOperations();
  }, []);

  onCleanup(() => {
    // 清理操作，例如取消未完成的异步任务
  });

  return { loading, error, progress, results };
};

// 使用示例
const Component = () => {
  const asyncOp1 = () => Promise.resolve('Result 1');
  const asyncOp2 = () => Promise.resolve('Result 2');
  const { loading, error, progress, results } = useAsyncOperation([asyncOp1, asyncOp2], {
    autoRetry: 2,
    retryDelay: 2000
  });

  return (
    <div>
      {loading() && <p>Loading...</p>}
      {error() && <p>Error: {error().message}</p>}
      {!loading() &&!error() && <p>Progress: {progress()}%</p>}
      {!loading() &&!error() && <p>Results: {results().join(', ')}</p>}
    </div>
  );
};

在上述 useAsyncOperation Hook 中：

自动重试：autoRetry 设定最大重试次数，retryDelay 设定每次重试的延迟时间。当某个异步操作失败时，如果重试次数未达到上限，则等待 retryDelay 时间后重新执行该操作。
错误处理：捕获每个异步操作的错误，如果所有操作都成功则更新 results，否则将错误设置到 error 信号中。
进度跟踪：根据已完成的操作数量占总操作数量的比例更新 progress 信号。

通过这种方式，可以有效地处理多个不同类型的异步操作，并实现所需的高级功能。

面试题：Solid.js 组件生命周期深度剖析与自定义Hooks的高级应用

知识考点

面试题答案

1. 子组件选择性跳过重新渲染

2. 基于 Solid.js 响应式原理创建通用自定义 Hook