React useState异步并发更新失效问题及函数式更新解决方案

在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}。

1. 假设 drawTaxiRoute(0, ...) 的回调先完成。它执行 setRoutes({...routes, [0+1]: result0})。此时，它捕获的 routes 是 {1: null, 2: null}，所以 setRoutes 会将状态更新为 {1: result0, 2: null}。
2. 紧接着，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 会将当前最新的状态值作为该函数的第一个参数传递进来。这样，无论外部闭包捕获到的是什么值，函数内部总能访问到最新的状态。

Zyro AI Background Remover

Zyro推出的AI图片背景移除工具

55

查看详情

将 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 是稳定的

工作原理：

1. 当 drawTaxiRoute(0, ...) 的异步回调完成时，它调用 setRoutes((oldRoutes) => ({...oldRoutes, [1]: result0}))。React 确保 oldRoutes 参数是当前 routes 状态的最新值（例如，初始的 {1: null, 2: null}）。状态被更新为 {1: result0, 2: null}。
2. 随后，当 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应用在复杂交互和异步流程中的稳定性和可预测性。

以上就是React useState异步并发更新失效问题及函数式更新解决方案的详细内容，更多请关注php中文网其它相关文章！