面试题：Solid.js 条件渲染中如何处理复杂状态下组件显示隐藏的性能优化

Question

在 Solid.js 应用里，存在多个组件根据复杂业务逻辑动态显示隐藏，且这些组件包含大量数据和交互。阐述如何通过 Solid.js 的特性（如响应式系统等）进行性能优化，以避免不必要的重新渲染，并举例说明关键代码逻辑。

Answer 1

1. 使用 createSignal 与 computed 优化响应式

Solid.js 的 createSignal 创建响应式状态，computed 创建依赖于信号的只读衍生值。对于复杂业务逻辑，将相关逻辑封装在 computed 中，只有依赖的信号变化时才会重新计算。

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

// 创建信号
const [count, setCount] = createSignal(0);
const [isVisible, setIsVisible] = createSignal(false);

// 计算复杂衍生值
const complexValue = computed(() => {
  // 这里写复杂业务逻辑，例如根据 count 计算复杂值
  return count() * 2 + (isVisible()? 10 : 0);
});

function MyComponent() {
  return (
    <div>
      <button onClick={() => setCount(count() + 1)}>Increment</button>
      <button onClick={() => setIsVisible(!isVisible())}>Toggle Visibility</button>
      {isVisible() && <p>Complex Value: {complexValue()}</p>}
    </div>
  );
}

在上述代码中，complexValue 只有在 count 或 isVisible 变化时才会重新计算，避免了不必要的重新渲染。

2. 利用 Memo 包裹组件

对于包含大量数据和交互的组件，使用 Memo 可以阻止组件在其依赖没有变化时重新渲染。

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

const [data, setData] = createSignal({ name: 'John', age: 30 });
const [otherValue, setOtherValue] = createSignal(0);

const BigComponent = Memo((props) => {
  // 大量数据和交互的组件逻辑
  return <div>{props.data.name} is {props.data.age} years old</div>;
}, (prevProps, nextProps) => {
  // 自定义比较逻辑，只有 data 变化时才重新渲染
  return prevProps.data === nextProps.data;
});

function App() {
  return (
    <div>
      <BigComponent data={data()} />
      <button onClick={() => setOtherValue(otherValue() + 1)}>Increment Other</button>
    </div>
  );
}

在这个例子中，BigComponent 只有在 data 变化时才会重新渲染，即使 otherValue 变化也不会触发 BigComponent 的重新渲染。

3. 使用 createEffect 控制副作用

对于组件显示隐藏的逻辑，结合 createEffect 可以在状态变化时执行副作用，而不会导致不必要的重新渲染。

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

const [isComponentVisible, setIsComponentVisible] = createSignal(false);

createEffect(() => {
  if (isComponentVisible()) {
    // 组件显示时的副作用逻辑，例如初始化一些外部库
    console.log('Component is visible, do some init');
  } else {
    // 组件隐藏时的副作用逻辑，例如清理资源
    console.log('Component is hidden, clean up');
  }
});

function MyApp() {
  return (
    <div>
      <button onClick={() => setIsComponentVisible(!isComponentVisible())}>Toggle Component</button>
      {isComponentVisible() && <div>My Component Content</div>}
    </div>
  );
}

createEffect 会在 isComponentVisible 变化时执行副作用，同时不会因为副作用的执行导致额外的重新渲染。