hook-service——基于useContext的局部状态管理

在实际项目工作中，发现有些数据需要在多个组件内传递，很多人会想到用useContext,这里我就介绍一个更好用的hook-service。

首先我们把需要用的state用createService创建：

//OrderConfirmService.tsx
import { useState } from 'react';import createService from 'hook-service';

/*这里可以申明所要用的类型*/

export const OrderConfirmService = createService(() => ({ 
    useOrderCart: useState<Item[]>(), 
    useCart: useState<Item[]>([]),  useAddress: useState<收货人详细信息对象>(),  
    useMethod: useState<LgFreightQueryDTO[]>([]),  useProductId: useState(0), 
    uesPayProductMap: useState<{ [key: number]: string | undefined }>({}), 
    useDiscountFee: useState(0),  useSubTotal: useState(0),  
    useOrderSn: useState(''),}));

createService 需要两个参数，第一个是自定义钩子，返回要跨组件使用的值。 第二个是可选的，当设置为 true 时，它​​将打印服务状态。

在所用的组件引用(useInject)：（关键代码）

//OrderConfirm.tsx(父组件)
import { OrderConfirmService } from './OrderConfirmService';
   const {    useAddress: [, set_address],    useCart: [, set_cart],    useSubTotal: [, set_subTotal],    useOrderSn: [, set_orderSn],    useOrderCart: [, set_order_cart],  } = OrderConfirmService.useInject();
//在父组件的子组件
          <ShippingAddress />
          <ShippingMethods />
          <Payment />
          <OrderReview />
          <Summary />

 export default OrderConfirmService.connect(OrderConfirm);

//OrderReview.tsx
  const {    useCart: [cart],    useOrderCart: [order_cart],  } = OrderConfirmService.useInject();

// Payment.tsx
 const {    useProductId: [payProductId, setPayProductId],    uesPayProductMap: [, setPayProductMap],  } = OrderConfirmService.useInject();
...

参考文献：hook-service