在react中，当多个异步操作尝试并发更新同一个`usestate`状态变量，且新状态依赖于旧状态时，可能会因闭包捕获到旧状态值而导致更新覆盖或丢失。本文将深入探讨这一常见问题，并提供使用`usestate`的函数式更新（functional updates）作为可靠的解决方案，确保在异步场景下状态更新的原子性和正确性。
异步并发状态更新的挑战
在React应用开发中，我们经常会遇到需要通过异步操作（例如API调用、事件监听回调）来更新组件状态的场景。当这些异步操作并发执行，并且它们都尝试基于当前状态来计算新状态时，一个常见的陷阱是由于JavaScript闭包的特性，异步回调函数可能会捕获到过时的状态值，从而导致非预期的行为。
考虑以下场景：一个React组件需要同时发起两个异步请求，每个请求成功后都会更新同一个状态对象中的不同字段。例如，使用Google Maps API获取两条不同的路线数据，并将其存储在一个名为 routes 的状态对象中：
const [routes, setRoutes] = useState({1: null, 2: null});
useEffect(() => {
// 假设 drawTaxiRoute 是一个异步函数，它会调用 setRoutes
drawTaxiRoute(0, data.taxis, data.origin, data.map, setRoutes, routes);
drawTaxiRoute(1, data.taxis, data.origin, data.map, setRoutes, routes);
}, []);
function drawTaxiRoute(N = 0, taxis, destination, map, setRoutes, routes) {
// ... 其他逻辑 ...
directionsService.route(
{
origin: taxis[N].getPosition(),
destination: destination,
travelMode: google.maps.TravelMode.DRIVING,
},
function (result, status) {
if (status === 'OK') {
// 问题所在：这里使用了外部传入的 'routes' 变量
setRoutes({...routes, [N+1]: result});
console.log(result, N+1);
}
}
);
}在这个例子中，useEffect 钩子在组件挂载时会调用 drawTaxiRoute 两次，分别处理索引 0 和 1 的路线。drawTaxiRoute 内部的 directionsService.route 是一个异步操作，其回调函数会在请求成功后执行。
问题分析：
当 drawTaxiRoute(0, ...) 和 drawTaxiRoute(1, ...) 被几乎同时调用时，它们各自内部的异步回调函数会捕获到 useEffect 首次执行时 routes 的值，即 {1: null, 2: null}。
- 假设 drawTaxiRoute(0, ...) 的回调先完成。它执行 setRoutes({...routes, [0+1]: result0})。此时，它捕获的 routes 是 {1: null, 2: null}，所以 setRoutes 会将状态更新为 {1: result0, 2: null}。
- 紧接着，drawTaxiRoute(1, ...) 的回调完成。它执行 setRoutes({...routes, [1+1]: result1})。关键在于，它捕获的 routes 仍然是最初的 {1: null, 2: null}，因为在它的回调执行时，React 可能还没有完成第一次 setRoutes 后的渲染周期，或者说，这个闭包中的 routes 变量在 drawTaxiRoute 被调用时就已经确定了。因此，它会尝试将状态更新为 {1: null, 2: result1}。
结果就是，第一次更新的数据被第二次更新的数据覆盖了，最终 routes 状态可能只包含第二次异步操作的结果（例如 {1: null, 2: {...}}），而第一次的结果丢失。
解决方案：使用函数式更新
React useState 的 setter 方法提供了一种机制来解决这种“陈旧闭包”（stale closure）问题，即函数式更新（Functional Updates）。当 setter 方法接收一个函数作为参数时，React 会将当前最新的状态值作为该函数的第一个参数传递进来。这样，无论外部闭包捕获到的是什么值，函数内部总能访问到最新的状态。
将 drawTaxiRoute 函数中的 setRoutes 调用修改为函数式更新的形式：
function drawTaxiRoute(N = 0, taxis, destination, map, setRoutes) { // 移除 routes 参数，因为它不再需要被闭包捕获
// ... 其他逻辑 ...
directionsService.route(
{
origin: taxis[N].getPosition(),
destination: destination,
travelMode: google.maps.TravelMode.DRIVING,
},
function (result, status) {
if (status === 'OK') {
// 使用函数式更新
setRoutes((oldRoutes) => ({
...oldRoutes,
[N+1]: result
}));
console.log(result, N+1);
}
}
);
}修改后的 useEffect 调用：
由于 drawTaxiRoute 不再需要 routes 作为参数来捕获旧值，我们可以简化 useEffect 的调用：
useEffect(() => {
drawTaxiRoute(0, data.taxis, data.origin, data.map, setRoutes);
drawTaxiRoute(1, data.taxis, data.origin, data.map, setRoutes);
}, []); // 依赖项数组保持不变，因为 setRoutes 是稳定的工作原理：
- 当 drawTaxiRoute(0, ...) 的异步回调完成时，它调用 setRoutes((oldRoutes) => ({...oldRoutes, [1]: result0}))。React 确保 oldRoutes 参数是当前 routes 状态的最新值（例如，初始的 {1: null, 2: null}）。状态被更新为 {1: result0, 2: null}。
- 随后，当 drawTaxiRoute(1, ...) 的异步回调完成时，它调用 setRoutes((oldRoutes) => ({...oldRoutes, [2]: result1}))。此时，React 传递给 oldRoutes 的值将是上一步更新后的最新状态 {1: result0, 2: null}。因此，状态被正确更新为 {1: result0, 2: result1}。
通过这种方式，每次 setRoutes 被调用时，它都能够基于最新的状态值进行修改，从而避免了并发更新导致的数据覆盖问题。
注意事项与最佳实践
- 何时使用函数式更新： 当你的新状态依赖于旧状态时，总是优先考虑使用函数式更新。这不仅适用于异步场景，也适用于同步场景，以避免在复杂的交互中出现意外。
- 保持状态不可变性： 无论是直接更新还是函数式更新，始终遵循React的状态不可变性原则。这意味着你不应该直接修改现有状态对象或数组，而是创建它们的副本并进行修改。在示例中，{...oldRoutes, [N+1]: result} 就是创建了一个新的对象。
- setter 的稳定性： useState 返回的 set 函数在组件的整个生命周期中是稳定的，不会改变。因此，即使在 useEffect 的依赖项数组中省略 setRoutes 也是安全的，它不会导致不必要的重新运行。
- 避免不必要的参数传递： 如果一个函数只需要 set 方法来更新状态，而不需要读取当前状态，那么就不必将当前状态作为参数传递给它，这有助于减少混淆并避免潜在的闭包问题。
总结
在React中处理异步并发状态更新时，理解并正确使用 useState 的函数式更新至关重要。通过将一个函数传递给 setter 方法，我们可以确保每次状态更新都基于最新的状态值，有效解决了因闭包捕获旧状态而导致的更新覆盖或丢失问题。这是一种健壮且推荐的模式，能够提高React应用在复杂交互和异步流程中的稳定性和可预测性。
