Signals 实战案例：从简单计数器到复杂电商应用的完整解决方案

【免费下载链接】signals Manage state with style in every framework 项目地址: https://gitcode.com/gh_mirrors/si/signals

Signals 是一个高性能的状态管理库，旨在让开发者能够轻松编写从简单到复杂应用的业务逻辑。无论你的业务逻辑有多复杂，应用更新都应该保持快速，无需你过多思考。Signals 自动在幕后优化状态更新，触发最少的必要更新。

为什么选择 Signals 状态管理？🚀

Signals 的核心优势在于其自动优化机制。它默认采用惰性更新策略，自动跳过无人监听的信号。这意味着即使你的应用状态变得非常复杂，性能也能保持最佳状态。

基础应用：简单计数器

让我们从最简单的计数器开始，了解 Signals 的基本用法：

import { useSignal } from "@preact/signals";

function Counter() {
  const count = useSignal(0);
  
  return (
    <div>
      <button onClick={() => count.value--}>-1</button>
      <output>{count}</output>
      <button onClick={() => count.value++}>+1</button>
    </div>
  );
}

在这个基础示例中，我们使用 useSignal 创建了一个信号。当用户点击按钮时，信号的值会自动更新，并且任何依赖该信号的组件都会重新渲染。

进阶应用：复杂数据嵌套

当应用变得更加复杂时，我们需要处理嵌套的对象结构：

function ComplexObjectDemo() {
  const user = useReactive({
    profile: {
      name: "John",
      age: 25,
      preferences: {
        theme: "dark",
        notifications: true
      }
    }
  });
  
  return (
    <div>
      <input 
        value={user.profile.name}
        onInput={(e) => user.profile.name.value = e.target.value
      />
    </div>
  );
}

电商应用实战案例 🛒

现在让我们看看如何在真实的电商应用中使用 Signals：

购物车管理

function ShoppingCart() {
  const cartItems = useSignal([]);
  const totalPrice = useComputed(() => {
    return cartItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0);
  
  const addToCart = (product) => {
    cartItems.value = [...cartItems.value, { ...product, quantity: 1 }];
  };
  
  const updateQuantity = (itemId, newQuantity) => {
    cartItems.value = cartItems.value.map(item =>
      item.id === itemId ? { ...item, quantity: newQuantity } : item
    );
  };
  
  return { cartItems, totalPrice, addToCart, updateQuantity };
}

用户认证状态

function AuthManager() {
  const user = useSignal(null);
  const isLoggedIn = useComputed(() => user.value !== null);
  
  const login = (credentials) => {
    // 认证逻辑
    user.value = { id: 1, name: "John Doe", email: "john@example.com" };
  const logout = () => {
    user.value = null;
  };
  
  return { user, isLoggedIn, login, logout };
}

商品筛选和搜索

function ProductFilter() {
  const products = useSignal([]);
  const searchQuery = useSignal("");
  const selectedCategory = useSignal("all");
  
  const filteredProducts = useComputed(() => {
    return products.value.filter(product => {
      const matchesSearch = product.name.toLowerCase().includes(searchQuery.value.toLowerCase());
      const matchesCategory = selectedCategory.value === "all" || product.category === selectedCategory.value;
      return matchesSearch && matchesCategory;
    });
  });
  
  return { products, searchQuery, selectedCategory, filteredProducts };
}

性能优化技巧 ⚡

批量更新

使用 batch 函数来合并多个信号写入操作：

import { batch } from "@preact/signals";

function updateMultipleItems() {
  batch(() => {
    item1.value = newValue1;
    item2.value = newValue2;
    item3.value = newValue3;
});

计算属性优化

const expensiveCalculation = useComputed(() => {
  // 复杂的计算逻辑
  return calculateResult(signal1.value, signal2.value);
});

实际项目架构建议

在大型电商应用中，建议采用以下架构模式：

• 核心状态管理：使用 packages/core 包
• 框架集成：根据你的技术栈选择 packages/react 或 packages/preact
• 开发调试：集成 packages/debug 包

总结

Signals 提供了一个既简单又强大的状态管理解决方案。从简单的计数器到复杂的电商应用，它都能提供出色的性能和开发体验。通过自动优化更新机制，开发者可以专注于业务逻辑，而不用担心性能问题。

无论你是构建小型项目还是企业级应用，Signals 都能为你提供所需的状态管理能力。开始使用 Signals，体验更高效的前端开发！🎯

【免费下载链接】signals Manage state with style in every framework 项目地址: https://gitcode.com/gh_mirrors/si/signals