面试题：Solid.js createSignal 与复杂全局状态架构设计

状态分层

顶层全局状态：

使用 createSignal 创建顶层的全局状态信号。例如，对于一个企业级应用可能存在用户认证状态、应用配置等全局信息。

import { createSignal } from'solid-js';

const [userAuth, setUserAuth] = createSignal({ isLoggedIn: false, userInfo: null });
const [appConfig, setAppConfig] = createSignal({ theme: 'light', language: 'en' });

模块级状态：
- 对于不同的业务模块，如订单模块、用户管理模块等，创建各自的状态信号。这些状态与特定模块紧密相关，但仍属于全局状态管理体系的一部分。
```
// 订单模块状态
const [orderList, setOrderList] = createSignal([]);
const [selectedOrder, setSelectedOrder] = createSignal(null);
```
组件级状态：
- 每个组件内部可能还有自己的局部状态，用于处理组件内的交互，如按钮的点击状态等。但这部分状态与全局状态管理的关联相对较弱，更多是组件自身的状态。
```
const MyComponent = () => {
  const [isButtonClicked, setIsButtonClicked] = createSignal(false);
  return (
    <button onClick={() => setIsButtonClicked(!isButtonClicked())}>
      Click me
    </button>
  );
};
```

数据流向控制

单向数据流原则：

尽量遵循单向数据流，从顶层状态向下传递数据。例如，将 userAuth 状态传递给需要它的子组件。

const App = () => {
  const [userAuth, setUserAuth] = createSignal({ isLoggedIn: false, userInfo: null });
  return (
    <div>
      <Header userAuth={userAuth()} />
      <MainContent userAuth={userAuth()} />
    </div>
  );
};

状态更新：
- 当需要更新状态时，通过调用 setSignal 函数来改变状态。例如，用户登录成功后更新 userAuth 状态。
```
const handleLogin = (userData) => {
  setUserAuth({ isLoggedIn: true, userInfo: userData });
};
```

事件驱动更新：

基于用户交互或其他事件来驱动状态更新。例如，在订单列表中点击删除按钮，触发 setOrderList 更新订单列表。

const handleDeleteOrder = (orderId) => {
  const currentOrders = orderList();
  const newOrders = currentOrders.filter(order => order.id!== orderId);
  setOrderList(newOrders);
};

与其他 Solid.js 特性的协同使用

reactive：
- reactive 可以用于创建更复杂的响应式数据结构。例如，如果你有一个包含多个属性且相互关联的对象，可以使用 reactive 来创建一个响应式版本。
```
import { reactive } from'solid-js';

const complexData = reactive({
  value1: 10,
  value2: 20,
  result: () => complexData.value1 + complexData.value2
});
```
- 这里 complexData 是一个响应式对象，当 value1 或 value2 改变时，result 函数的返回值也会自动更新。

computed：

computed 用于创建基于其他状态的派生状态。例如，计算已登录用户的订单总数。

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

const [userAuth, setUserAuth] = createSignal({ isLoggedIn: false, userInfo: null });
const [orderList, setOrderList] = createSignal([]);

const loggedInUserOrderCount = computed(() => {
  if (userAuth().isLoggedIn) {
    return orderList().filter(order => order.userId === userAuth().userInfo.id).length;
  }
  return 0;
});

loggedInUserOrderCount 是一个基于 userAuth 和 orderList 的派生状态，当这两个状态变化时，它会自动重新计算。

通过以上方式，可以基于 createSignal 构建一个高效的全局状态管理体系，适用于大型企业级 Solid.js 应用。

星途面试题库

面试题：Solid.js createSignal 与复杂全局状态架构设计

知识考点

面试题答案

状态分层

数据流向控制

与其他 Solid.js 特性的协同使用