面试题：Qwik组件设计模式下处理复杂业务逻辑与可维护性的平衡

1. 状态管理

使用$store模式：在Qwik中，$store是一种方便的状态管理方式。可以创建一个包含共享状态的$store对象，例如：

import { component$, useStore } from '@builder.io/qwik';

const counterStore = () => {
  const state = useStore({
    count: 0,
    increment: () => {
      state.count++;
    }
  });
  return state;
};

export const Counter = component$(() => {
  const store = counterStore();
  return (
    <div>
      <p>Count: {store.count}</p>
      <button onClick={() => store.increment()}>Increment</button>
    </div>
  );
});

这样，不同组件若需要访问或修改这个状态，都可以引入这个$store对象，确保状态的一致性和集中管理。

局部状态：对于仅在单个组件内部使用的状态，直接在组件内部定义和管理。例如，一个Toggle组件可能有自己的isOpen状态：

import { component$ } from '@builder.io/qwik';

export const Toggle = component$(() => {
  let isOpen = false;
  const toggle = () => {
    isOpen =!isOpen;
  };
  return (
    <div>
      <button onClick={toggle}>{isOpen? 'Close' : 'Open'}</button>
    </div>
  );
});

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

属性传递：对于父子组件间的依赖关系，通过属性传递来处理。父组件将数据或函数作为属性传递给子组件。例如，父组件有一个列表数据，传递给子组件进行展示：

import { component$ } from '@builder.io/qwik';

const ListItem = component$(({ item }) => {
  return <li>{item}</li>;
});

const MyList = component$(() => {
  const items = ['apple', 'banana', 'cherry'];
  return (
    <ul>
      {items.map((item, index) => (
        <ListItem key={index} item={item} />
      ))}
    </ul>
  );
});

依赖注入：对于更复杂的依赖关系，尤其是跨层级的依赖，可以使用依赖注入的方式。例如，创建一个上下文对象，然后通过Qwik的inject机制让组件可以获取这个上下文。

import { component$, inject, provide } from '@builder.io/qwik';

// 创建上下文
const userContext = {
  user: { name: 'John Doe', role: 'admin' }
};

const App = component$(() => {
  provide('userContext', userContext);
  return (
    <div>
      {/* 子组件树 */}
    </div>
  );
});

const DeepChild = component$(() => {
  const context = inject('userContext');
  return (
    <p>User: {context.user.name}</p>
  );
});

事件总线：当组件间的依赖关系是基于事件驱动时，可以创建一个简单的事件总线。例如：

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));
    }
  }
};

// 组件1触发事件
import { component$ } from '@builder.io/qwik';

const Component1 = component$(() => {
  const sendEvent = () => {
    eventBus.emit('someEvent', { message: 'Hello from Component1' });
  };
  return <button onClick={sendEvent}>Send Event</button>;
});

// 组件2监听事件
const Component2 = component$(() => {
  eventBus.on('someEvent', (data) => {
    console.log(data.message);
  });
  return <div>Listening for events</div>;
});

3. 组件模块化与复用

单一职责原则：确保每个组件只负责一个明确的功能。例如，一个Button组件只负责渲染按钮和处理按钮相关的交互，而不涉及与按钮无关的业务逻辑。这样，当业务逻辑发生变化时，只需要修改对应的组件，而不会影响其他组件。
高阶组件（HOC）模式：虽然Qwik没有像React那样传统的高阶组件概念，但可以通过类似的方式来实现功能复用。例如，创建一个用于添加日志功能的高阶组件：

import { component$ } from '@builder.io/qwik';

const withLogging = (WrappedComponent) => {
  return component$(() => {
    console.log('Component is rendered');
    return <WrappedComponent />;
  });
};

const MyComponent = component$(() => {
  return <div>My Component</div>;
});

const LoggedComponent = withLogging(MyComponent);

组合模式：通过组合多个简单组件来构建复杂组件。例如，一个Form组件可以由Input、Button等多个基础组件组合而成，这样每个基础组件可以独立维护和复用，同时Form组件也可以通过不同的组合方式来满足不同的业务需求。

星途面试题库

面试题：Qwik组件设计模式下处理复杂业务逻辑与可维护性的平衡

知识考点

面试题答案

1. 状态管理

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

3. 组件模块化与复用