面试题：Solid.js组件卸载与跨组件通信资源清理的深度分析

1. 资源清理策略

组件卸载生命周期钩子：在Solid.js中，每个组件都有onCleanup函数，可用于在组件卸载时执行清理操作。例如，如果组件订阅了事件总线，可在onCleanup中取消订阅。

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

const MyComponent = () => {
  const [data, setData] = createSignal('');
  const eventBusSubscription = subscribeToEventBus((newData) => setData(newData));

  onCleanup(() => {
    // 取消事件总线订阅
    eventBusSubscription.unsubscribe();
  });

  return <div>{data()}</div>;
};

外部服务资源清理：如果组件依赖外部服务（如API调用、WebSocket连接等），同样在onCleanup中清理这些资源。例如，取消未完成的API请求。

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

const MyComponent = () => {
  const [responseData, setResponseData] = createSignal(null);
  let cancelTokenSource = axios.CancelToken.source();

  const fetchData = async () => {
    try {
      const response = await axios.get('/api/data', {
        cancelToken: cancelTokenSource.token
      });
      setResponseData(response.data);
    } catch (error) {
      if (!axios.isCancel(error)) {
        console.error('Error fetching data:', error);
      }
    }
  };

  fetchData();

  onCleanup(() => {
    // 取消未完成的API请求
    cancelTokenSource.cancel('Component unmounted');
  });

  return <div>{responseData() && <pre>{JSON.stringify(responseData(), null, 2)}</pre>}</div>;
};

2. 状态管理与跨组件通信完整性

上下文（Context）：
- Provider与Consumer模式：使用Solid.js的上下文来共享状态。当组件卸载时，确保上下文状态不会被意外修改。如果卸载的组件修改了上下文状态，可能会导致其他依赖该上下文的组件出现异常。例如，在上下文对象中存储用户信息：

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

const UserContext = createContext();

const UserProvider = ({ children }) => {
  const [user, setUser] = createSignal({ name: '', age: 0 });
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

const MyComponent = () => {
  const { user } = UserContext.useContext();
  return <div>User: {user().name}</div>;
};

不可变数据更新：在更新上下文状态时，始终使用不可变数据模式。这可以确保组件能够正确检测到状态变化，并且避免由于直接修改对象而导致的意外行为。例如，更新用户信息：

const updateUser = () => {
  const { setUser } = UserContext.useContext();
  setUser((prevUser) => ({...prevUser, name: 'New Name' }));
};

事件总线：
- 解耦组件通信：事件总线允许组件之间进行松散耦合的通信。确保在组件卸载时正确取消事件订阅，以防止内存泄漏和无效回调执行。如前面示例中在onCleanup中取消事件总线订阅。
- 事件数据一致性：在事件总线传递数据时，保证数据格式的一致性。如果一个组件发送特定格式的数据，其他订阅该事件的组件应能正确处理这种格式的数据。例如，定义事件数据的接口：

interface MyEventData {
  type: string;
  payload: any;
}

const eventBus = {
  subscribers: new Map<string, Array<(data: MyEventData) => void>>(),
  subscribe(eventType, callback) {
    if (!this.subscribers.has(eventType)) {
      this.subscribers.set(eventType, []);
    }
    this.subscribers.get(eventType)!.push(callback);
    return {
      unsubscribe: () => {
        const subscribers = this.subscribers.get(eventType);
        if (subscribers) {
          const index = subscribers.indexOf(callback);
          if (index!== -1) {
            subscribers.splice(index, 1);
          }
        }
      }
    };
  },
  publish(eventType, data) {
    const subscribers = this.subscribers.get(eventType);
    if (subscribers) {
      subscribers.forEach((callback) => callback(data));
    }
  }
};

3. 全局状态管理（可选）

Redux - 类似状态管理库：对于更复杂的应用，可以引入类似Redux的状态管理库。通过集中管理状态，确保状态变化的可预测性。当组件卸载时，状态管理库中的状态变化应遵循一定的规则，不会因组件卸载而破坏整体状态的一致性。
- Actions与Reducers：定义明确的actions来描述状态变化，reducers来处理这些变化。例如，在一个计数器应用中：

// actions.ts
const increment = { type: 'INCREMENT' };
const decrement = { type: 'DECREMENT' };

// reducers.ts
const counterReducer = (state = { value: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    case 'DECREMENT':
      return { value: state.value - 1 };
    default:
      return state;
  }
};

MobX：MobX使用可观察状态和响应式编程来管理状态。组件可以观察状态变化并自动更新。当组件卸载时，MobX会自动处理相关的依赖清理，确保不会出现无效的观察。例如：

import { makeObservable, observable, action } from'mobx';
import { createContext, useContext } from'solid-js';

class CounterStore {
  @observable value = 0;

  constructor() {
    makeObservable(this);
  }

  @action increment = () => {
    this.value++;
  };

  @action decrement = () => {
    this.value--;
  };
}

const CounterStoreContext = createContext(new CounterStore());

const MyComponent = () => {
  const store = useContext(CounterStoreContext);
  return (
    <div>
      <button onClick={store.decrement}>-</button>
      <span>{store.value}</span>
      <button onClick={store.increment}>+</button>
    </div>
  );
};

面试题：Solid.js组件卸载与跨组件通信资源清理的深度分析

知识考点

面试题答案

1. 资源清理策略

2. 状态管理与跨组件通信完整性

3. 全局状态管理（可选）