面试题：Solid.js 组件样式与动态类名在复杂嵌套结构中的优化处理

Question

在一个具有多层嵌套的 Solid.js 应用中，有一个父组件 `ParentComponent`，其内部嵌套了多个子组件 `ChildComponent`，每个 `ChildComponent` 又有自己的子组件 `GrandChildComponent`。`GrandChildComponent` 需要根据 `ParentComponent` 传递下来的状态变量 `status` 动态切换类名，同时 `ChildComponent` 和 `GrandChildComponent` 都要有各自的局部样式，并且在性能方面要进行优化，避免不必要的重新渲染。请详细描述你的实现思路和关键代码。

Answer 1

实现思路

1. 状态传递：通过 props 将 ParentComponent 中的 status 状态传递给 ChildComponent，再由 ChildComponent 传递给 GrandChildComponent。
2. 动态类名：在 GrandChildComponent 中根据接收到的 status 动态切换类名。
3. 局部样式：使用 CSS Modules 或者 styled-components 为 ChildComponent 和 GrandChildComponent 创建各自的局部样式。
4. 性能优化：利用 createMemo 和 createEffect 以及 shouldUpdate 等机制来避免不必要的重新渲染。

关键代码

1. ParentComponent.js

import { createSignal } from'solid-js';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [status, setStatus] = createSignal('default');

  return (
    <div>
      <ChildComponent status={status()} />
    </div>
  );
};

export default ParentComponent;

2. ChildComponent.js

import { createMemo } from'solid-js';
import GrandChildComponent from './GrandChildComponent';

const ChildComponent = ({ status }) => {
  const memoizedStatus = createMemo(() => status);

  return (
    <div className="child - component - style">
      <GrandChildComponent status={memoizedStatus()} />
    </div>
  );
};

export default ChildComponent;

3. GrandChildComponent.js

import { createMemo } from'solid-js';

const GrandChildComponent = ({ status }) => {
  const dynamicClassName = createMemo(() => {
    return status === 'active'? 'active - class' : 'default - class';
  });

  return (
    <div className={`grand - child - component - style ${dynamicClassName()}`}>
      {/* 内容 */}
    </div>
  );
};

export default GrandChildComponent;

4. 局部样式（以 CSS Modules 为例）

• ChildComponent.module.css

.child - component - style {
  /* 具体样式 */
}

• GrandChildComponent.module.css

.grand - child - component - style {
  /* 具体样式 */
}

.active - class {
  /* 激活状态样式 */
}

.default - class {
  /* 默认状态样式 */
}

5. 导入样式

• 在 ChildComponent.js 中导入 import styles from './ChildComponent.module.css';，并将 className="child - component - style" 修改为 className={styles['child - component - style']}。
• 在 GrandChildComponent.js 中导入 import styles from './GrandChildComponent.module.css';，并将 className={grand - child - component - style ${dynamicClassName()}} 修改为 className={${styles['grand - child - component - style']} ${styles[dynamicClassName()]}}。