面试题：Solid.js最佳实践在大型项目架构中的深度应用

1. 组件初始化

Props 处理：
- 在 Solid.js 组件接收 props 时，首先进行类型检查。使用 TypeScript 来确保传入 props 的类型正确，避免运行时错误。例如，对于一个按钮组件：
```
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}
const Button = (props: ButtonProps) => {
  // 组件逻辑
};
```
- 对 props 进行默认值设置，使得组件在使用时更加灵活。如上述按钮组件：
```
const Button = (props: ButtonProps) => {
  const { label = '默认按钮', onClick, disabled = false } = props;
  // 组件逻辑
};
```

状态初始化：

使用 createSignal 来初始化组件的状态。例如，对于一个可折叠面板组件，有一个控制展开和收起的状态：

import { createSignal } from'solid-js';
const CollapsePanel = () => {
  const [isOpen, setIsOpen] = createSignal(false);
  // 组件逻辑
};

如果状态依赖于 props，可以在 createEffect 中进行处理。例如，根据传入的 props 动态更新状态：

import { createSignal, createEffect } from'solid-js';
const MyComponent = (props: { initialValue: number }) => {
  const [value, setValue] = createSignal(props.initialValue);
  createEffect(() => {
    setValue(props.initialValue);
  });
  // 组件逻辑
};

2. 组件更新

响应式更新：
- Solid.js 基于响应式系统，当依赖的状态（createSignal 创建的信号）或 props 发生变化时，相关的 DOM 部分会自动更新。例如，在一个计数器组件中：
```
import { createSignal } from'solid-js';
const Counter = () => {
  const [count, setCount] = createSignal(0);
  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={() => setCount(count() + 1)}>Increment</button>
    </div>
  );
};
```
- 当点击按钮触发 setCount 时，count 信号变化，p 标签中的内容会自动更新。

优化更新：

使用 createMemo 来缓存计算结果，避免不必要的重新计算和更新。例如，在一个展示格式化日期的组件中：

import { createSignal, createMemo } from'solid-js';
const DateComponent = () => {
  const [date, setDate] = createSignal(new Date());
  const formattedDate = createMemo(() => {
    // 复杂的日期格式化逻辑
    return date().toISOString();
  });
  return (
    <div>
      <p>{formattedDate()}</p>
      <button onClick={() => setDate(new Date())}>Update Date</button>
    </div>
  );
};

只有当 date 信号变化时，formattedDate 才会重新计算，避免了每次按钮点击都执行复杂的日期格式化逻辑。

3. 组件销毁

清理副作用：
- 在组件中如果有副作用操作，如定时器、订阅等，需要在组件销毁时进行清理。使用 createEffect 并返回一个清理函数。例如，在一个使用定时器的组件中：
```
import { createEffect } from'solid-js';
const TimerComponent = () => {
  createEffect(() => {
    const id = setInterval(() => {
      // 定时器逻辑
    }, 1000);
    return () => clearInterval(id);
  });
  return <div>Timer Component</div>;
};
```
当组件销毁时，清理函数会被调用，清除定时器，避免内存泄漏。

4. 处理组件间复杂的依赖关系

依赖注入：

对于深度嵌套组件间的依赖，可以使用 createContext 和 provide/consume 来进行依赖注入。例如，在一个多层嵌套的表单组件中，顶层组件提供表单的上下文，子组件可以消费这个上下文：

import { createContext, provide, consume } from'solid-js';
const FormContext = createContext();
const Form = () => {
  const formData = { /* 表单数据 */ };
  return (
    <FormContext.Provider value={formData}>
      {/* 子组件 */}
    </FormContext.Provider>
  );
};
const Field = () => {
  const formData = consume(FormContext);
  // 使用 formData
  return <input />;
};

事件总线：

对于兄弟组件或非直接关联组件间的通信，可以使用简单的事件总线模式。创建一个事件中心对象，组件可以在该对象上订阅和发布事件。例如：

const eventBus = {
  events: {},
  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  },
  emit(eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(callback => callback(data));
    }
  }
};
// 组件 A 发布事件
const ComponentA = () => {
  const handleClick = () => {
    eventBus.emit('componentA-click', { message: 'Button in Component A clicked' });
  };
  return <button onClick={handleClick}>Click in Component A</button>;
};
// 组件 B 订阅事件
const ComponentB = () => {
  createEffect(() => {
    eventBus.on('componentA-click', data => {
      console.log(data.message);
    });
  });
  return <div>Component B</div>;
};

5. 处理异步操作

异步数据获取：

使用 createResource 来处理异步数据获取。例如，从 API 获取用户数据的组件：

import { createResource } from'solid-js';
const UserComponent = () => {
  const [user, { loading, error }] = createResource(() => fetch('/api/user').then(res => res.json()));
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <div>
      <p>Name: {user().name}</p>
    </div>
  );
};

createResource 会自动处理加载状态和错误状态，并且在依赖变化时重新获取数据。

异步操作与状态更新：

当异步操作完成后需要更新组件状态时，确保在 Solid.js 的响应式系统内进行更新。例如，在上传文件后更新上传状态：

import { createSignal } from'solid-js';
const UploadComponent = () => {
  const [uploadStatus, setUploadStatus] = createSignal('idle');
  const handleUpload = () => {
    // 异步上传逻辑
    fetch('/api/upload', { method: 'POST' })
    .then(() => {
        setUploadStatus('success');
      })
    .catch(() => {
        setUploadStatus('error');
      });
  };
  return (
    <div>
      <button onClick={handleUpload}>Upload</button>
      <p>{uploadStatus()}</p>
    </div>
  );
};

通过 setUploadStatus 来更新状态，触发响应式更新。

星途面试题库