React应用中Put请求优化：减少API调用与Lambda触发次数

1. 本地暂存+批量提交 #

• 用户点击「+/-」按钮时，先只更新组件本地的数量状态，不立刻发起API请求。
• 提供「保存全部更改」按钮，或者设置自动延迟提交（比如用户停止操作2秒后自动触发），将所有修改的物品数据打包成一个请求发送到API Gateway。
• Lambda端接收到批量请求后，调用DynamoDB的BatchWriteItem接口一次性完成多条数据更新，避免多次触发Lambda。

2. React Query结合防抖优化 #

• 利用React Query的乐观更新能力，点击按钮时先直接更新缓存中的数据，让UI即时响应；同时用防抖函数（比如lodash.debounce）合并短时间内的多次操作。
• 防抖时间设置在300-500ms即可，用户连续点击的操作会被合并成一次API请求，大幅减少调用次数。
• 示例代码：

const debouncedUpdate = useCallback(
  debounce(async (itemId, newCount) => {
    await updateItemApi(itemId, newCount);
    queryClient.invalidateQueries(['items']);
  }, 500),
  []
);

const handleCountChange = (itemId, delta) => {
  // 乐观更新缓存
  queryClient.setQueryData(['items', itemId], (old) => ({
    ...old,
    count: old.count + delta
  }));
  // 触发防抖的API请求
  debouncedUpdate(itemId, old.count + delta);
};

3. 改用DynamoDB原子更新操作 #

• 把原来的PutItem替换为UpdateItem，使用原子表达式（比如SET count = count + :delta），确保并发场景下数据的一致性。
• 结合防抖逻辑，既减少请求次数，又避免多请求冲突导致的数据错误。
• Lambda端处理示例：

exports.handler = async (event) => {
  const { itemId, delta } = JSON.parse(event.body);
  await dynamoDb.update({
    TableName: 'YourCollectionTable',
    Key: { id: itemId },
    UpdateExpression: 'SET count = count + :delta',
    ExpressionAttributeValues: { ':delta': delta },
    ReturnValues: 'UPDATED_NEW'
  }).promise();
  return { statusCode: 200 };
};

4. 本地持久化缓存（可选） #

• 如果场景允许短暂的数据不一致，可以将未提交的修改存在localStorage或sessionStorage中，在用户关闭页面、切换路由时批量提交更新。
• 这种方式能最大程度降低API调用频率，适合对实时性要求不高的场景。

内容的提问来源于stack exchange，提问作者C-delb