☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

{"type":"doc","content":[{"type":"heading","attrs":{"id":"0687bee5-d265-4d80-a506-c01072adfb45","textalign":"inherit","indent":0,"level":1,"ishoverdraghandle":false},"content":[{"type":"text","text":"引言"}]},{"type":"paragraph","attrs":{"id":"0fd4f85a-d059-419e-abc7-a85cd189d3e4","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"我们的供应链系统开发中，最近遇到了一个挑战：如何高效管理错综复杂的业务状态。想象一下，当你在处理一个包含数百个sku、数十个仓库、多个供应商的采购订单时，一个简单的收货操作可能会触发库存更新、订单状态变更、质检流程启动等一系列连锁反应。"},{"type":"text","marks":[{"type":"bold"}],"text":"状态管理不再是简单的数据存储问题，"},{"type":"text","text":"选择合适的状态管理方案对系统可维护性和开发效率的决定性影响。"}]},{"type":"paragraph","attrs":{"id":"9a59a9e4-705c-4a4c-bb33-d0681234069b","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"本文将通过一个典型的\"采购订单详情\"页面实战案例，深入剖析redux、mobx和context api在复杂供应链场景下的优劣，希望能为你的技术选型提供有价值的参考。"}]},{"type":"heading","attrs":{"id":"b1b4999e-b053-445a-b19c-8caf4d1aafdc","textalign":"inherit","indent":0,"level":1,"ishoverdraghandle":false},"content":[{"type":"text","text":"一、业务场景深度剖析"}]},{"type":"heading","attrs":{"id":"ff869129-0696-4805-bdba-42451ad543f8","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","text":"1.1 采购订单详情页面的复杂状态关系"}]},{"type":"paragraph","attrs":{"id":"df00106f-acd7-48cb-8b4c-7f960516cc59","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"让我们聚焦于一个典型的\"采购订单详情\"页面，这个看似简单的页面背后隐藏着惊人的状态复杂度："}]},{"type":"codeblock","attrs":{"id":"cef41504-d6c7-4ab2-a36a-0874d4525179","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"const order = { id: \"po202308001\", supplier: { id: \"sup1001\", name: \"优质食品供应商\" }, status: \"processing\", // 订单状态 totalamount: 15000, items: [ { skuid: \"sku1001\", name: \"有机牛奶\", quantity: 100, receivedquantity: 80, // 已收货数量 pendingquantity: 20, // 待收货数量 unitprice: 50, subtotal: 5000 }, // ...其他sku ], receipts: [ { id: \"rec202308001\", skuid: \"sku1001\", quantity: 50, warehouse: \"wh001\", batchno: \"batch20230801\", inspection: { status: \"pending\", // 质检状态: pending, passed, failed remarks: \"\" } }, // ...其他收货记录 ], realtimestock: { \"sku1001\": { \"wh001\": 200, // 仓库wh001的实时库存 \"wh002\": 150 // 仓库wh002的实时库存 } // ...其他sku的库存 }};"}]},{"type":"heading","attrs":{"id":"b28eb298-f5d9-4f49-ac0e-d064cafb0bdd","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","text":"1.2 状态复杂性的真实挑战"}]},{"type":"paragraph","attrs":{"id":"f02ad664-5f2f-4ae2-bba1-5e650f8c2d9a","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"在这个页面中，我们面临以下关键挑战："}]},{"type":"bulletlist","attrs":{"id":"05b54555-4771-4c35-aad8-bfd1ee62cb28","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"17002d1b-59b5-4e2d-b556-1def8a02e72e"},"content":[{"type":"paragraph","attrs":{"id":"46b642cb-2d4a-480e-830f-ac00c269b1be","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"状态关联性"},{"type":"text","text":"：更新一条收货记录会触发订单总收货量、待收货量的重新计算"}]}]},{"type":"listitem","attrs":{"id":"20d9e01e-6e85-47c2-a1e0-d1f8e4fcb5d5"},"content":[{"type":"paragraph","attrs":{"id":"90908a47-f113-414d-9fc5-bd4c341fb957","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"跨组件通信"},{"type":"text","text":"：sku列表、收货记录、质检结果、库存信息分布在不同组件中，但数据紧密关联"}]}]},{"type":"listitem","attrs":{"id":"f4b2ace1-f1e4-4b0d-b416-be6730cd8cfd"},"content":[{"type":"paragraph","attrs":{"id":"473bdd25-99c4-42fe-b4c9-6a706be9f464","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"实时性要求"},{"type":"text","text":"：库存数据需要从独立接口获取并实时更新"}]}]},{"type":"listitem","attrs":{"id":"efd9cb6c-cb66-43dc-aa33-7ddccd7c1ecd"},"content":[{"type":"paragraph","attrs":{"id":"9a0662a8-1ef0-4a07-9d50-10eb10728493","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"状态衍生"},{"type":"text","text":"：质检结果变化可能影响订单状态和ui操作权限"}]}]}]},{"type":"paragraph","attrs":{"id":"277e273f-37c6-4386-a81f-440ba20e5248","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"图1：供应链系统中状态变化的连锁反应示意图"}]},{"type":"image","attrs":{"id":"a64564a5-97a8-430f-a8d7-94e58814eb94","src":"https://developer.qcloudimg.com/http-save/audit-10133498/bb1fe0df8fe649b3aceb199147abdae2.png","extension":"png","align":"center","alt":"","showalt":false,"href":"","boxshadow":"","width":1100,"aspectratio":"3.927757","status":"success","showtext":true,"ispercentage":false,"percentage":0,"ishoverdraghandle":false}},{"type":"paragraph","attrs":{"id":"72e6f8da-a0da-415c-be1f-6a7a9dfbc6f8","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false}},{"type":"heading","attrs":{"id":"cebf9e19-87e3-4a74-8f00-4a5ec54b5dd8","textalign":"inherit","indent":0,"level":1,"ishoverdraghandle":false},"content":[{"type":"text","text":"二、技术方案实战对比"}]},{"type":"heading","attrs":{"id":"d10af53f-5bb2-49b1-bb57-6276c3efc70c","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","text":"2.1 redux方案：可预测的状态管理"}]},{"type":"heading","attrs":{"id":"ce9026b9-35a0-498f-abc2-b2120d32f17d","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","text":"架构解析"}]},{"type":"paragraph","attrs":{"id":"783b3b38-f656-4667-a163-5928ace6ba2e","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"redux采用\"单一数据源\"理念，通过严格的单向数据流确保状态变化可预测。在供应链场景中，我们设计了以下核心模块："}]},{"type":"bulletlist","attrs":{"id":"c38f7325-eb10-4f22-82d2-93cfbba2bdf4","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"9df7ca5d-b881-4f65-ab22-2519e3e6d52b"},"content":[{"type":"paragraph","attrs":{"id":"38040854-bd3f-409e-acd3-689390e19d1d","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"code"}],"text":"orderreducer"},{"type":"text","text":"：处理订单主信息和商品行"}]}]},{"type":"listitem","attrs":{"id":"125ee5a6-1484-4501-95d2-af63b11d0325"},"content":[{"type":"paragraph","attrs":{"id":"327ba67d-1d61-4221-975c-cd7b555dbd4d","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"code"}],"text":"receiptreducer"},{"type":"text","text":"：管理收货记录和质检状态"}]}]},{"type":"listitem","attrs":{"id":"7bd18513-06a8-4e86-9a76-918be276b34c"},"content":[{"type":"paragraph","attrs":{"id":"c2b66649-56a5-4a00-8008-6af35b791228","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"code"}],"text":"stockreducer"},{"type":"text","text":"：处理实时库存数据"}]}]},{"type":"listitem","attrs":{"id":"02043ea9-9cca-4d1c-aafa-1f191e2d82c8"},"content":[{"type":"paragraph","attrs":{"id":"be961322-67e3-4a40-9437-fc6be0dfb2af","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"code"}],"text":"middleware"},{"type":"text","text":"：处理异步操作和状态衍生逻辑"}]}]}]},{"type":"heading","attrs":{"id":"a0790386-fba0-4fcd-9705-4bca27aac605","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","text":"代码示例"}]},{"type":"paragraph","attrs":{"id":"09744a97-7dfa-40cb-8897-1b38a8a99a40","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"1、动作类型常量和动作创建函数"}]},{"type":"codeblock","attrs":{"id":"211616ce-ed96-40cb-9dfd-752a46b59c53","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"export const update_receipt_quantity = 'update_receipt_quantity';export const update_inspection_status = 'update_inspection_status';\export const updatereceiptquantity = (receiptid, quantity) =u003e ({ type: update_receipt_quantity, payload: { receiptid, quantity }});\export const updateinspectionstatus = (receiptid, status, remarks) =u003e ({ type: update_inspection_status, payload: { receiptid, status, remarks }});"}]},{"type":"paragraph","attrs":{"id":"0b4f4ff3-82b2-4260-add2-29502e7c97bc","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"2、更新收货数量并重新计算订单状态"}]},{"type":"codeblock","attrs":{"id":"81c1d213-d1e3-4191-adc5-0adc1945b598","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"import { update_receipt_quantity } from '../actions/orderactions';\const initialstate = { order: null, loading: false, error: null};\export default function orderreducer(state = initialstate, action) { switch (action.type) { case update_receipt_quantity: return { ...state, order: updatereceiptquantityinorder(state.order, action.payload) }; // 其他action处理... default: return state; }}\// 辅助函数：更新收货数量并重新计算订单状态unction updatereceiptquantityinorder(order, { receiptid, quantity }) { if (!order) return order; const updatedreceipts = order.receipts.map(receipt =u003e receipt.id === receiptid ? { ...receipt, quantity } : receipt ); // 重新计算每个sku的已收货和待收货数量 const updateditems = order.items.map(item =u003e { const received = updatedreceipts .filter(r =u003e r.skuid === item.skuid) .reduce((sum, r) =u003e sum + r.quantity, 0); return { ...item, receivedquantity: received, pendingquantity: item.quantity - received }; }); return { ...order, receipts: updatedreceipts, items: updateditems };}"}]},{"type":"heading","attrs":{"id":"8240787a-51d1-4605-8f56-ed61f92f0dc6","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","text":"逻辑解析"}]},{"type":"bulletlist","attrs":{"id":"47cdb92a-65d2-4838-a3fd-f811a07939e0","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"5ea85cdb-01e9-44dd-afab-bf887c24cd9d"},"content":[{"type":"paragraph","attrs":{"id":"b4229559-4f95-4490-a13f-a8b23a6d4446","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"状态计算隔离"},{"type":"text","text":"：通过"},{"type":"text","marks":[{"type":"code"}],"text":"updatereceiptquantityinorder"},{"type":"text","text":"函数将状态计算逻辑从reducer中抽离，提高可测试性"}]}]},{"type":"listitem","attrs":{"id":"d690db14-9e2c-42c1-bb4b-caa272626cfe"},"content":[{"type":"paragraph","attrs":{"id":"8631d138-4326-4157-8fee-4d5232dcc01f","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"不可变性保证"},{"type":"text","text":"：使用展开运算符创建新对象，避免直接修改状态"}]}]},{"type":"listitem","attrs":{"id":"43734982-0c0c-40d1-9a8e-a377ba601296"},"content":[{"type":"paragraph","attrs":{"id":"a85dbb8e-4bb0-45ad-9736-2491aef5d928","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"中间件处理副作用"},{"type":"text","text":"：使用redux-thunk处理质检状态变更后的订单状态更新和通知发送"}]}]}]},{"type":"heading","attrs":{"id":"4c71fcaf-811c-41a7-a7fd-e4c6f34f0506","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","text":"优缺点分析"}]},{"type":"paragraph","attrs":{"id":"d2d34f9c-18b5-44da-87ad-2660dbe7df7b","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"优点"},{"type":"text","text":"："}]},{"type":"bulletlist","attrs":{"id":"23d126a0-a6e2-4e61-99b1-8d9df654d57a","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"443a102f-5164-4b0c-bbcd-a4a85a3c77ee"},"content":[{"type":"paragraph","attrs":{"id":"c7d53d63-db60-4434-a5e5-81a639d04d86","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"状态变化完全可预测，调试工具强大"}]}]},{"type":"listitem","attrs":{"id":"2d56259a-e512-4018-8de6-2aee6cb47b8b"},"content":[{"type":"paragraph","attrs":{"id":"2575e045-da56-47fe-8f94-dcd00c462c67","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"适合复杂业务逻辑和大规模状态树"}]}]},{"type":"listitem","attrs":{"id":"464b0a9e-9433-47a8-8dbe-3bb2b504e5ff"},"content":[{"type":"paragraph","attrs":{"id":"4d11362b-c6a2-4f94-9ead-e461f56ae45c","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"中间件生态丰富，处理异步逻辑得心应手"}]}]}]},{"type":"paragraph","attrs":{"id":"27bff414-944b-43ab-a925-0ee93e8bfdb1","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"缺点"},{"type":"text","text":"："}]},{"type":"bulletlist","attrs":{"id":"bd251d4f-360d-4173-915d-470c5140a4bf","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"c6680b8b-7983-430e-a576-3d399ff45429"},"content":[{"type":"paragraph","attrs":{"id":"c7d2863e-7f1d-4f20-aa94-d5ea56698e84","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"模板代码较多，学习曲线陡峭"}]}]},{"type":"listitem","attrs":{"id":"3de31a7e-f072-41bd-8258-edfa5324eb89"},"content":[{"type":"paragraph","attrs":{"id":"9109b4b1-b4ac-4267-912d-749053f8ba34","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"简单场景下显得过于重量级"}]}]},{"type":"listitem","attrs":{"id":"5c1043e1-806b-48c2-8c6a-c45655a6147a"},"content":[{"type":"paragraph","attrs":{"id":"a8746469-1b3a-42ef-9b9c-8a553036d48e","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"状态更新需要经过完整的action-reducer流程，性能开销较大"}]}]}]},{"type":"paragraph","attrs":{"id":"f7aa967f-ba66-4ecd-aced-36690ab4ab55","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"图2：redux在供应链系统中的数据流示意图"}]},{"type":"image","attrs":{"id":"9563f381-2cc8-4d61-b0d9-a0ff74ab4872","src":"https://developer.qcloudimg.com/http-save/audit-10133498/337a9ec05ef084c499c121291a52c7f6.png","extension":"png","align":"center","alt":"","showalt":false,"href":"","boxshadow":"","width":1100,"aspectratio":"2.286420","status":"success","showtext":true,"ispercentage":false,"percentage":0,"ishoverdraghandle":false}},{"type":"paragraph","attrs":{"id":"4708fe5c-116e-4cd7-b19a-b5554a417e6d","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false}},{"type":"heading","attrs":{"id":"42a7a828-9537-47e4-b4ba-e649e1c992b2","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","text":"2.2 mobx方案：响应式的状态魔法"}]},{"type":"heading","attrs":{"id":"343f5edb-3a73-460a-ad48-dd61c31d5747","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","text":"架构解析"}]},{"type":"paragraph","attrs":{"id":"b6d9f32f-ab0b-4291-b0f3-04e0b38ec77b","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"mobx采用响应式编程范式，通过observable自动追踪状态依赖关系。在供应链场景中，我们构建了以下核心store："}]},{"type":"bulletlist","attrs":{"id":"7ebda173-0aaa-4d43-a159-48fba845e364","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"0d73ed68-ef86-4117-8603-506434afaa38"},"content":[{"type":"paragraph","attrs":{"id":"0e31483a-a957-4e6a-9da1-626664cc5633","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"code"}],"text":"orderstore"},{"type":"text","text":"：管理订单主数据和计算属性"}]}]},{"type":"listitem","attrs":{"id":"21d8a068-1398-4152-bd55-2f3a0a5eee27"},"content":[{"type":"paragraph","attrs":{"id":"073489cd-1f51-48a5-a74a-ea176e5de9f3","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"code"}],"text":"receiptstore"},{"type":"text","text":"：处理收货记录和质检逻辑"}]}]},{"type":"listitem","attrs":{"id":"34ac6b91-a9af-4f0b-9e23-6064fc505ae9"},"content":[{"type":"paragraph","attrs":{"id":"486db43c-690d-4fb4-b6fc-a75cb6782063","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"code"}],"text":"stockstore"},{"type":"text","text":"：管理实时库存数据"}]}]},{"type":"listitem","attrs":{"id":"0f59e812-a216-45dd-b0e4-90ce68f06336"},"content":[{"type":"paragraph","attrs":{"id":"861c97b5-7249-494a-9abe-5cd2bce8cbd8","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"通过"},{"type":"text","marks":[{"type":"code"}],"text":"reaction"},{"type":"text","text":"和"},{"type":"text","marks":[{"type":"code"}],"text":"autorun"},{"type":"text","text":"处理状态间的自动响应"}]}]}]},{"type":"heading","attrs":{"id":"d9e25ac7-1485-4cf9-9c9b-ec2dff4a8287","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","text":"代码示例"}]},{"type":"codeblock","attrs":{"id":"1993e2c2-4f52-438c-a16f-607f34e80935","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"import { makeobservable, observable, computed, action, runinaction } from 'mobx';\class orderstore { order = null; loading = false; error = null;\ constructor() { makeobservable(this, { order: observable, loading: observable, error: observable, totalreceivedquantity: computed, isfullyreceived: computed, updatereceiptquantity: action, updateinspectionstatus: action }); }\ // 计算属性：总收货数量 get totalreceivedquantity() { if (!this.order) return 0; return this.order.items.reduce((sum, item) =u003e sum + item.receivedquantity, 0); }\ // 计算属性：是否全部收货完成 get isfullyreceived() { return this.order u0026u0026 this.order.items.every(item =u003e item.pendingquantity === 0); }\ // 更新收货数量（自动触发相关计算属性更新） updatereceiptquantity(receiptid, quantity) { const receipt = this.order.receipts.find(r =u003e r.id === receiptid); if (receipt) { receipt.quantity = quantity; this._recalculateorder(); } }\ // 更新质检状态 updateinspectionstatus(receiptid, status, remarks) { const receipt = this.order.receipts.find(r =u003e r.id === receiptid); if (receipt) { receipt.inspection.status = status; receipt.inspection.remarks = remarks; // 如果质检不合格，可能需要更新订单状态 if (status === 'failed') { this._handlefailedinspection(receipt); } this._recalculateorder(); } }\ // 内部方法：重新计算订单状态 _recalculateorder() { runinaction(() =u003e { // 重新计算每个sku的收货状态 this.order.items.foreach(item =u003e { const received = this.order.receipts .filter(r =u003e r.skuid === item.skuid) .reduce((sum, r) =u003e sum + r.quantity, 0); item.receivedquantity = received; item.pendingquantity = item.quantity - received; }); // 根据业务规则更新订单状态 if (this.isfullyreceived) { this.order.status = 'completed'; } else if (this.order.receipts.some(r =u003e r.inspection.status === 'failed')) { this.order.status = 'issue'; } }); }}\export default new orderstore();"}]},{"type":"heading","attrs":{"id":"924e40ef-f17a-4ad3-ab18-f20d0c3c09ea","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","text":"重点逻辑解析"}]},{"type":"bulletlist","attrs":{"id":"3874e32a-c2c4-478b-b31f-3fc3120c598a","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"8d250bc2-2032-463f-a240-96ace07a4267"},"content":[{"type":"paragraph","attrs":{"id":"80468fcb-95d1-456f-8120-198a8481f2b2","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"响应式计算"},{"type":"text","text":"：通过"},{"type":"text","marks":[{"type":"code"}],"text":"computed"},{"type":"text","text":"自动追踪依赖关系，收货数量变化自动更新相关计算属性"}]}]},{"type":"listitem","attrs":{"id":"fb2fb401-4c5f-4442-82c6-ffb649d4aa26"},"content":[{"type":"paragraph","attrs":{"id":"eabb5c76-030c-46f1-a14e-432218645567","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"细粒度更新"},{"type":"text","text":"：mobx只更新真正依赖变化状态的组件，避免不必要的渲染"}]}]},{"type":"listitem","attrs":{"id":"ae8e89a5-99b8-40a4-834d-687686bbd21e"},"content":[{"type":"paragraph","attrs":{"id":"e96d8602-47bc-4dd4-892e-1c4b10dd1dc7","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"反应式副作用"},{"type":"text","text":"：使用"},{"type":"text","marks":[{"type":"code"}],"text":"reaction"},{"type":"text","text":"处理质检状态变化后的额外逻辑"}]}]}]},{"type":"heading","attrs":{"id":"ed0ca336-c48e-4241-b9b5-5111e2b89fd5","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","text":"优缺点分析"}]},{"type":"paragraph","attrs":{"id":"31810bee-f8f1-4277-ab38-dbfbd18edb24","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"优点"},{"type":"text","text":"："}]},{"type":"bulletlist","attrs":{"id":"15ce76a0-301d-48ee-a477-8e740e22ebcf","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"a6a60e2a-a5e3-49a4-a265-7235a6843264"},"content":[{"type":"paragraph","attrs":{"id":"bd550be6-2028-4e8f-927b-7ae8a8f3f96c","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"响应式编程模型，状态更新自动传播"}]}]},{"type":"listitem","attrs":{"id":"c273619d-22d8-40d3-9ff4-865bc63692d0"},"content":[{"type":"paragraph","attrs":{"id":"d96a9f3f-d241-4bc7-9a03-7ccb6868d31f","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"代码简洁，接近原生javascript思维"}]}]},{"type":"listitem","attrs":{"id":"ba22cd54-e8c1-4a89-b871-5e0cadad453e"},"content":[{"type":"paragraph","attrs":{"id":"d60d2dc7-472a-49f1-b9ef-566822c64ec3","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"细粒度更新，性能表现优异"}]}]},{"type":"listitem","attrs":{"id":"23cc8c13-50b6-4981-a49e-5d7e5f61d2ff"},"content":[{"type":"paragraph","attrs":{"id":"4848bdc8-f007-4652-bc43-39b8e894b484","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"调试相对直观，可追踪状态变化"}]}]}]},{"type":"paragraph","attrs":{"id":"3ff7f035-5496-42af-88d0-4cadd740a996","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"缺点"},{"type":"text","text":"："}]},{"type":"bulletlist","attrs":{"id":"feeee090-66f0-4c28-97b9-51adb6351ffa","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"dd675b8b-aaee-483c-8385-4d831977cfc6"},"content":[{"type":"paragraph","attrs":{"id":"9977ae34-53de-48d3-92be-236e92b50736","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"响应式原理需要理解，调试深层问题可能较难"}]}]},{"type":"listitem","attrs":{"id":"50d45e81-134f-40a2-812b-36bcc98757b6"},"content":[{"type":"paragraph","attrs":{"id":"04728158-2ef2-47f5-bf74-4bc0dd449531","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"过度使用计算属性可能导致性能问题"}]}]},{"type":"listitem","attrs":{"id":"15cdfd9c-c3c1-44e2-bced-bb313dbdce02"},"content":[{"type":"paragraph","attrs":{"id":"0c2c77d7-a7c5-43f1-a00f-81e39fccc638","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"不像redux那样有严格的单向数据流，状态变化路径不够透明"}]}]}]},{"type":"paragraph","attrs":{"id":"a8a45e0f-18d9-46a6-b667-daa348ce0051","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"图3：mobx在供应链系统中的响应式关系图"}]},{"type":"image","attrs":{"id":"d9963493-1485-436b-a4aa-cfab9e9d6e50","src":"https://developer.qcloudimg.com/http-save/audit-10133498/1c64cec10f19ac304082b57374f77e24.png","extension":"png","align":"center","alt":"","showalt":false,"href":"","boxshadow":"","width":1100,"aspectratio":"1.713740","status":"success","showtext":true,"ispercentage":false,"percentage":0,"ishoverdraghandle":false}},{"type":"paragraph","attrs":{"id":"b3877d2d-336f-4877-98c9-b2477b999e0d","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false}},{"type":"heading","attrs":{"id":"ab30ebd1-62ca-41fb-a119-a26c9be4d054","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","text":"2.3 context api方案：轻量级的原生解决方案"}]},{"type":"heading","attrs":{"id":"83947e6b-20b7-43a7-a4af-82b2c3a77074","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","text":"架构解析"}]},{"type":"paragraph","attrs":{"id":"7d4c561c-5774-4688-8c4e-8235d10ca3d9","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"context api是react内置的状态管理方案，适合组件树内部的状态共享。在供应链场景中，我们设计了以下结构："}]},{"type":"bulletlist","attrs":{"id":"1bb7342c-a9cc-405d-9320-141dd91a5cff","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"ec6cf53d-5687-4f67-bf26-db68231f08ff"},"content":[{"type":"paragraph","attrs":{"id":"8b6d3a5e-9db2-4676-b679-3f50ce40d8f0","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"code"}],"text":"ordercontext"},{"type":"text","text":"：提供订单主数据和操作方法"}]}]},{"type":"listitem","attrs":{"id":"05e02075-858c-45ef-b703-785264c4d397"},"content":[{"type":"paragraph","attrs":{"id":"9e1c1872-d057-45f6-8c0b-f63f4eb07afa","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"code"}],"text":"receiptcontext"},{"type":"text","text":"：管理收货记录和质检"}]}]},{"type":"listitem","attrs":{"id":"132fbb58-c4e7-4536-9f2e-8f89f677af08"},"content":[{"type":"paragraph","attrs":{"id":"7e9b251d-8d90-46a3-b8cb-483416d00e25","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"code"}],"text":"stockcontext"},{"type":"text","text":"：处理实时库存"}]}]},{"type":"listitem","attrs":{"id":"c216ca84-92c5-4cad-9876-ac3574f8e8ea"},"content":[{"type":"paragraph","attrs":{"id":"1b60d574-c537-4a80-a226-11efe37aa08d","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"通过高阶组件或自定义hook封装context使用"}]}]}]},{"type":"heading","attrs":{"id":"3c76cd88-ce2a-4bec-b3cc-25e857d5d5d2","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","text":"代码示例"}]},{"type":"codeblock","attrs":{"id":"4d2ea7ec-7760-4f4a-97a1-ff0b97c229b9","language":"javascript","theme":"atom-one-dark","runtimes":0,"ishoverdraghandle":false,"key":"","languagebyai":"javascript"},"content":[{"type":"text","text":"import react, { createcontext, usecontext, usereducer, useeffect } from 'react';\// reducer处理订单状态unction orderreducer(state, action) { switch (action.type) { case 'set_order': return { ...state, order: action.payload, loading: false }; case 'update_receipt_quantity': return updatereceiptquantity(state, action.payload); case 'update_inspection_status': return updateinspectionstatus(state, action.payload); // 其他action... default: return state; }}\// 初始化状态const initialstate = { order: null, loading: true, error: null};\// 创建contextconst ordercontext = createcontext();\// context providerexport function orderprovider({ orderid, children }) { const [state, dispatch] = usereducer(orderreducer, initialstate); // 加载订单数据 useeffect(() =u003e { const loadorder = async () =u003e { try { const order = await fetchorderdetails(orderid); dispatch({ type: 'set_order', payload: order }); } catch (error) { dispatch({ type: 'set_error', payload: error.message }); } }; loadorder(); }, [orderid]); // 更新收货数量 const updatereceiptquantity = (receiptid, quantity) =u003e { dispatch({ type: 'update_receipt_quantity', payload: { receiptid, quantity } }); }; // 更新质检状态 const updateinspectionstatus = (receiptid, status, remarks) =u003e { dispatch({ type: 'update_inspection_status', payload: { receiptid, status, remarks } }); }; return ( u003cordercontext.provider value={{ ...state, updatereceiptquantity, updateinspectionstatus }}u003e {children} u003c/ordercontext.provideru003e );}\// 自定义hook，简化context使用export function useordercontext() { const context = usecontext(ordercontext); if (!context) { throw new error('useordercontext must be used within an orderprovider'); } return context;}\// 辅助函数：更新收货数量unction updatereceiptquantity(state, { receiptid, quantity }) { if (!state.order) return state; const updatedreceipts = state.order.receipts.map(receipt =u003e receipt.id === receiptid ? { ...receipt, quantity } : receipt ); // 重新计算sku状态 const updateditems = state.order.items.map(item =u003e { const received = updatedreceipts .filter(r =u003e r.skuid === item.skuid) .reduce((sum, r) =u003e sum + r.quantity, 0); return { ...item, receivedquantity: received, pendingquantity: item.quantity - received }; }); return { ...state, order: { ...state.order, receipts: updatedreceipts, items: updateditems } };}"}]},{"type":"heading","attrs":{"id":"1451481e-baa0-4fd7-a927-2164f5b40629","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","text":"重点逻辑解析"}]},{"type":"bulletlist","attrs":{"id":"08fa09aa-1216-41a6-8291-20f12124124208e","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"8f60577c-ff8a-4fb3-811e-81ed37d3a469"},"content":[{"type":"paragraph","attrs":{"id":"27063cee-ec0c-4dcd-8c82-08070429676b","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"组件树作用域"},{"type":"text","text":"：context api的状态共享限制在组件树内，避免全局污染"}]}]},{"type":"listitem","attrs":{"id":"a0a31814-5a8b-4024-9173-6c5734f0667d"},"content":[{"type":"paragraph","attrs":{"id":"0087a5e1-b00e-4ed5-b5e8-935d6d434b29","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"usereducer组合"},{"type":"text","text":"：结合usereducer实现类似redux的可预测状态更新"}]}]},{"type":"listitem","attrs":{"id":"eaf9f335-44d9-4474-a1eb-62d586d0df50"},"content":[{"type":"paragraph","attrs":{"id":"eaa03392-3ce5-47c4-9184-b18eb838e416","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"自定义hook封装"},{"type":"text","text":"：通过自定义hook简化context使用，提高代码复用性"}]}]}]},{"type":"heading","attrs":{"id":"3679d82a-544a-4ab7-afc9-bdfcdb8b4777","textalign":"inherit","indent":0,"level":3,"ishoverdraghandle":false},"content":[{"type":"text","text":"优缺点分析"}]},{"type":"paragraph","attrs":{"id":"9c3fce94-c9bc-4260-821d-92233435803e","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"优点"},{"type":"text","text":"："}]},{"type":"bulletlist","attrs":{"id":"3c072e3e-5bbd-4dfe-beeb-06aa74b37ae8","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"4f5bc6d3-2e44-41a7-bbf2-cc2fd03871b5"},"content":[{"type":"paragraph","attrs":{"id":"9ab71f9f-fd76-4470-b9f4-1a276e395e7b","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"react原生支持，无需额外依赖"}]}]},{"type":"listitem","attrs":{"id":"ceeadfe1-0619-4e6a-9724-565950fef9f1"},"content":[{"type":"paragraph","attrs":{"id":"8515a817-4afe-4f4f-84a0-1f8d2f08aefd","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"学习曲线平缓，易于上手"}]}]},{"type":"listitem","attrs":{"id":"10d09c24-5ff6-414c-b389-19bb32e82478"},"content":[{"type":"paragraph","attrs":{"id":"d5f4dfbe-bfd2-4f40-8772-fa5368f07570","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"适合组件树内部的状态共享"}]}]},{"type":"listitem","attrs":{"id":"544f81ff-a323-4c76-b60b-80e2e8c6697b"},"content":[{"type":"paragraph","attrs":{"id":"267d14d6-cddd-40a6-af4a-691009b912b3","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"代码结构清晰，与react理念高度契合"}]}]}]},{"type":"paragraph","attrs":{"id":"15ac3b33-65e5-4b11-ab39-9d60bc8ccb80","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"缺点"},{"type":"text","text":"："}]},{"type":"bulletlist","attrs":{"id":"01280772-be8f-49c8-91fe-3f13904e1819","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"a296075a-daeb-4e86-bf76-cd985a550e36"},"content":[{"type":"paragraph","attrs":{"id":"95103711-347d-431e-97e6-1c05cb796469","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"复杂场景下性能可能下降（context变化触发所有订阅组件更新）"}]}]},{"type":"listitem","attrs":{"id":"1d78a466-7e98-4c03-ad0f-7750eb2e72aa"},"content":[{"type":"paragraph","attrs":{"id":"197ec564-0e2e-48f6-8e96-7d4b374e24ed","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"调试工具不如redux完善"}]}]},{"type":"listitem","attrs":{"id":"7fb3e6f0-0079-4e5c-925b-6fa1f016d5dd"},"content":[{"type":"paragraph","attrs":{"id":"fcfd7a1a-c0be-4a86-8279-f635eb92e1a4","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"状态逻辑分散在多个context中，难以全局管理"}]}]}]},{"type":"paragraph","attrs":{"id":"e8a54e23-c9f3-4358-8904-8c674717aec6","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"图4：context api在供应链系统中的组件树关系图"}]},{"type":"image","attrs":{"id":"30f0d7c6-1f1b-48a4-958b-ebf59fb0b006","src":"https://developer.qcloudimg.com/http-save/audit-10133498/85c655cc10db14f54c8c89bd8b4522e5.png","extension":"png","align":"center","alt":"","showalt":false,"href":"","boxshadow":"","width":1100,"aspectratio":"2.563307","status":"success","showtext":true,"ispercentage":false,"percentage":0,"ishoverdraghandle":false}},{"type":"heading","attrs":{"id":"3a885847-9ce7-42b3-823a-97d30dcc61e0","textalign":"inherit","indent":0,"level":1,"ishoverdraghandle":false},"content":[{"type":"text","text":"三、多维度对比与选型建议"}]},{"type":"heading","attrs":{"id":"f770bd93-6a7d-4a1f-89b5-e0d5888dc8f8","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","text":"3.1 核心维度对比"}]},{"type":"table","attrs":{"id":"76931abd-8e43-45e9-9576-4dae7d23872d","ishoverdraghandle":false},"content":[{"type":"tablerow","content":[{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"39496750-c042-4e78-8bef-a59ac98a5ee5","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"维度"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"7132c22f-00c6-418d-a147-e12f975c847f","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"redux"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"ee503590-8648-4372-91e4-0d5c8424208f","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"mobx"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"212e802f-59b0-49ec-81ec-b2c21498a3e2","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"context api"}]}]}]},{"type":"tablerow","content":[{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"34d32ed4-6052-4773-b411-94c9ed2b819b","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"学习曲线"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"0283216f-d23f-4afd-8ad1-7afe3aed6951","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"陡峭（需理解flux架构）"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"59d44a0b-a81e-46a7-b7e7-2129d5052824","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"中等（需理解响应式编程）"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"26d167fa-ace2-4c5c-9a81-11c51afef241","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"平缓（react原生概念）"}]}]}]},{"type":"tablerow","content":[{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"37012a06-7b3f-443b-83c0-9a061270a3bd","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"代码量"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"7c8c95b7-8a15-413a-b6e6-c1bd7794883c","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"多（样板代码）"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"53f1e9c8-496f-499d-8365-0d158f755385","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"少（声明式）"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"4446d5df-264a-4149-93c3-33fd8181d195","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"中等（需合理组织）"}]}]}]},{"type":"tablerow","content":[{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"905f30a7-2436-4df2-9983-2b742a1f66dd","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"调试能力"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"2820bf67-f0d5-49bf-b9aa-f302153292ac","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"极佳（devtools完整追踪）"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"fb653981-b860-4104-959b-765b2f29a3f2","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"良好（可追踪状态变化）"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"2c0a1b8f-7720-4989-93f5-3ba6764f5861","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"一般（依赖react devtools）"}]}]}]},{"type":"tablerow","content":[{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"afb38efd-27c9-429a-a548-1b218e08ec18","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"性能表现"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"354a74aa-ca5f-41da-8c4e-2388d522af1b","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"中等（完整reducer执行）"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"4c28535b-2dce-4025-b612-610b5149bbf0","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"优秀（细粒度更新）"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"e1631356-1eb7-4305-a657-36cef76b36a8","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"取决于实现（可能触发过多渲染）"}]}]}]},{"type":"tablerow","content":[{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"03f35076-3d54-497a-bf8a-bda14e2120cd","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"可维护性"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"3813d80c-b5db-47b7-a2f0-1b976002c820","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"高（结构清晰，逻辑分离）"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"88a59ada-9113-41f8-873a-188351f5b09e","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"中高（依赖关系隐式）"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"629a338c-55eb-4219-8806-a5ca1f1b3136","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"中（状态分散在多个context）"}]}]}]},{"type":"tablerow","content":[{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"4af2a13d-a027-462a-9a1c-735462ad8305","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"适合场景"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"cce6a425-c6ab-43ce-8f6b-56b8bfd5ac9f","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"超大型应用，复杂业务逻辑"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"dca1df51-f102-461e-955b-e8d109332370","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"中大型应用，高交互性"}]}]},{"type":"tablecell","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"background":null,"color":null,"textalign":null,"style":"border-color: rgb(217, 217, 217); background-color: rgba(255, 255, 255, 0.04);"},"content":[{"type":"paragraph","attrs":{"id":"c952b821-3a50-489c-942d-2a8b9e55f71a","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"中小型应用，组件树内状态共享"}]}]}]}]},{"type":"heading","attrs":{"id":"c05743cc-af92-40af-81c5-4726f29884bf","textalign":"inherit","indent":0,"level":2,"ishoverdraghandle":false},"content":[{"type":"text","text":"3.2 实战选型建议"}]},{"type":"paragraph","attrs":{"id":"42d58594-05f2-4bf3-b4c9-e7fdb934bc61","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"基于供应链系统的特性，我给出以下建议："}]},{"type":"paragraph","attrs":{"id":"0e1871a6-0822-42c1-8f45-66e8f81acd51","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"（1）超大型供应链系统（10+复杂页面，50+状态实体）"},{"type":"text","text":"："}]},{"type":"bulletlist","attrs":{"id":"5f6c1d44-4293-40c4-a2b2-893d7cb7f4ce","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"c347accc-9b13-4ff0-bb7c-f8808bcd5eed"},"content":[{"type":"paragraph","attrs":{"id":"252e5ebb-9eda-4360-91d5-43bbf1dd50eb","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"首选redux"},{"type":"text","text":"：严格的单向数据流和强大的调试能力在复杂场景下优势明显"}]}]},{"type":"listitem","attrs":{"id":"86b717b4-e942-453f-acf7-e6814afd8521"},"content":[{"type":"paragraph","attrs":{"id":"0cd38bbf-daca-41f5-8b93-8bc92fffbc18","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"优化建议"},{"type":"text","text":"：使用redux toolkit简化样板代码，结合redux-thunk处理异步逻辑"}]}]}]},{"type":"paragraph","attrs":{"id":"e67d8917-8c98-48d5-a597-e10128fcf9b6","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"（2）中型供应链系统（5-10个复杂页面，20-50个状态实体）"},{"type":"text","text":"："}]},{"type":"bulletlist","attrs":{"id":"05af16fc-1f7b-4133-aba7-beebfa7991c5","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"0cb11a3d-3700-4ea7-99fe-58542233e51a"},"content":[{"type":"paragraph","attrs":{"id":"b455af68-d2ee-4da6-a1a7-ffc670c8a7ae","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"首选mobx"},{"type":"text","text":"：响应式模型完美匹配供应链中状态的高关联性"}]}]},{"type":"listitem","attrs":{"id":"715a3734-7319-4877-a877-045482697bc1"},"content":[{"type":"paragraph","attrs":{"id":"436681e6-5a5f-442d-8cf4-d11b5e9d88ac","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"优化建议"},{"type":"text","text":"：合理组织store结构，避免过度使用计算属性"}]}]}]},{"type":"paragraph","attrs":{"id":"b3b8c2f5-d95d-4e37-969f-4331f4de1f06","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"（3）轻量级供应链模块（1-5个页面，u003c20个状态实体）"},{"type":"text","text":"："}]},{"type":"bulletlist","attrs":{"id":"1ce836fb-4a46-4ff7-bf35-65f6f3bd5557","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"6a4bd8a8-97e3-4f41-bea9-36205a9f0e10"},"content":[{"type":"paragraph","attrs":{"id":"b898186c-2847-4dc3-8286-ba71437bce87","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"首选context api"},{"type":"text","text":"：无需额外依赖，与react无缝集成"}]}]},{"type":"listitem","attrs":{"id":"7f023a42-71c0-4f90-8032-8649d6143978"},"content":[{"type":"paragraph","attrs":{"id":"f2fb9502-438e-4b8e-9046-ff1467daa604","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"优化建议"},{"type":"text","text":"：拆分多个context避免过度渲染，结合usereducer管理复杂状态逻辑"}]}]}]},{"type":"heading","attrs":{"id":"6ff69c76-e623-4dd0-8c0c-4de1fdc1401e","textalign":"inherit","indent":0,"level":1,"ishoverdraghandle":false},"content":[{"type":"text","text":"结语"}]},{"type":"paragraph","attrs":{"id":"178f6d30-6b3a-4b0b-9de1-2d3eb4e3f7ff","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"供应链系统的状态管理绝非简单的技术选型问题，而是业务复杂度、团队能力和长期维护成本的综合考量。通过本文的深入对比，我们可以得出以下结论："}]},{"type":"bulletlist","attrs":{"id":"3088c437-7ff0-462c-98ed-4e9205620cfc","ishoverdraghandle":false},"content":[{"type":"listitem","attrs":{"id":"4c00d2c9-655d-4737-a625-3b95a93bd7aa"},"content":[{"type":"paragraph","attrs":{"id":"4469daab-e665-49de-ac82-301eb58250f2","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"redux"},{"type":"text","text":"在超大型供应链系统中依然保持着不可替代的地位，其可预测性和调试能力是处理复杂业务逻辑的利器，但需要付出额外的学习和开发成本。"}]}]},{"type":"listitem","attrs":{"id":"f7606ea9-e9ff-4dd4-ba74-f59f5874db6d"},"content":[{"type":"paragraph","attrs":{"id":"af74549a-08cd-47b9-9cb1-591f1b874afe","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"mobx"},{"type":"text","text":"在中型供应链系统中展现出色的平衡性，响应式编程模型与供应链业务的高关联性完美契合，开发效率和性能表现俱佳。"}]}]},{"type":"listitem","attrs":{"id":"3fbb5bd4-ee06-4308-81a0-343db29f9e1c"},"content":[{"type":"paragraph","attrs":{"id":"e544817a-c214-4bf4-9810-6f892507c7a3","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"context api"},{"type":"text","text":"作为react原生方案，在轻量级供应链模块中表现出色，避免了额外依赖，但在复杂场景下需要精心设计以避免性能问题。"}]}]}]},{"type":"paragraph","attrs":{"id":"a0663f41-0314-40a6-b84c-f4b053f7006b","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"在供应链系统开发中，我建议采取\"渐进式\"策略：从小型模块开始尝试context api，随着复杂度增加逐步引入mobx，只有在真正需要时才考虑redux。记住，状态管理只是手段，业务价值的实现才是目的。"}]},{"type":"paragraph","attrs":{"id":"4444699b-7d84-40e4-93b3-91e275acd1bd","textalign":"inherit","indent":0,"color":null,"background":null,"ishoverdraghandle":false},"content":[{"type":"text","text":"希望本文能帮助你在供应链系统的状态管理迷宫中找到最适合的路径。技术选型没有绝对的对错，只有是否适合当前场景。当你下次面对复杂的供应链状态管理挑战时，不妨先问自己：我的业务复杂度是否真的需要这个方案？这或许能帮你避免过度设计的陷阱，让开发之路走得更加从容。"}]}]}