面试题：Solid.js中createSignal在复杂组件结构中的应用

状态共享与响应实现：

在父组件中使用 createSignal 创建全局状态。例如：

import { createSignal } from'solid-js';
const ParentComponent = () => {
  const [globalState, setGlobalState] = createSignal(initialValue);
  return (
    <ChildComponent globalState={globalState} />
  );
};

子组件接收父组件传递的 globalState 信号。子组件中可以使用 createEffect 或 createMemo 来响应状态变化。
使用 createEffect：

const ChildComponent = ({ globalState }) => {
  createEffect(() => {
    const value = globalState();
    // 根据 value 做出相应操作，比如更新 DOM 等
    console.log('Global state changed:', value);
  });
  return <div>Child Component</div>;
};

使用 createMemo：

const ChildComponent = ({ globalState }) => {
  const derivedValue = createMemo(() => {
    const value = globalState();
    // 基于 globalState 计算衍生值
    return value * 2;
  });
  return <div>{derivedValue()}</div>;
};

避免不必要的重新渲染：
- 使用 createMemo 进行依赖优化：对于复杂的计算，将其封装在 createMemo 中。createMemo 会缓存计算结果，只有当它依赖的信号发生变化时才会重新计算。例如上述 derivedValue 的计算，只有 globalState 变化时 derivedValue 才会重新计算，避免了不必要的重新计算和可能引发的不必要渲染。
- 使用 splitProps 拆分属性：如果子组件接收多个属性，而只有部分属性与状态相关，可以使用 splitProps 拆分属性。这样可以确保只有与状态相关的属性变化时才会触发子组件的更新。例如：
```
import { splitProps } from'solid-js';
const ChildComponent = (props) => {
  const [stateProps, otherProps] = splitProps(props, ['globalState']);
  const { globalState } = stateProps;
  createEffect(() => {
    const value = globalState();
    console.log('Global state changed:', value);
  });
  return <div {...otherProps}>Child Component</div>;
};
```
- Memoization（记忆化）：对于函数组件，可以通过记忆化函数来避免重复创建相同的函数引用，从而减少不必要的重新渲染。例如，如果子组件接收一个回调函数，并且该回调函数在父组件每次渲染时都会重新创建，可以使用 createMemo 来记忆化这个回调函数。
```
const ParentComponent = () => {
  const [globalState, setGlobalState] = createSignal(initialValue);
  const memoizedCallback = createMemo(() => () => {
    setGlobalState(newValue);
  });
  return (
    <ChildComponent globalState={globalState} callback={memoizedCallback()} />
  );
};
```
这样即使父组件重新渲染，只要 globalState 不变，memoizedCallback 引用就不会变，子组件如果依赖 callback 就不会因为 callback 的引用变化而重新渲染。

星途面试题库

面试题：Solid.js中createSignal在复杂组件结构中的应用

知识考点

面试题答案