React异步并发更新State：避免覆盖的函数式方案

本文探讨了在react中处理并发异步操作更新同一状态变量时，由于闭包捕获旧状态值而导致数据覆盖的问题。通过一个google maps api集成示例，详细阐述了问题产生的原因，并提供了使用`usestate`的函数式更新机制作为解决方案，确保在异步环境中始终基于最新状态进行更新，从而避免数据丢失。

在React应用开发中，我们经常会遇到需要通过异步操作来更新组件状态的场景。然而，当多个异步操作几乎同时触发，并且它们都试图基于当前状态来计算新状态时，可能会遇到一个常见的问题：状态更新覆盖。本文将深入探讨这一问题，并提供一个健壮的解决方案。

理解异步状态更新的挑战

考虑一个React组件，它需要从外部API获取数据并更新一个状态变量。例如，我们可能需要同时获取两条路线的地理信息（polyline），并将它们存储在一个对象中，其中键代表路线编号。

假设我们有一个状态变量routes用于存储这些路线数据：

const [routes, setRoutes] = useState({1: null, 2: null});

我们通过一个useEffect钩子来触发两个异步函数drawTaxiRoute，它们分别获取第一条和第二条路线：

useEffect(() => {
    drawTaxiRoute(0, data.taxis, data.origin, data.map, setRoutes, routes);
    drawTaxiRoute(1, data.taxis, data.origin, data.map, setRoutes, routes);
}, []);

drawTaxiRoute函数内部调用Google Maps Directions API，并在回调中尝试更新routes状态：

function drawTaxiRoute(N = 0, taxis, destination, map, setRoutes, routes) {
    // ... 其他逻辑，例如初始化 directionsService 和 taxiRouteDisplay

    directionsService.route(
        {
            origin: taxis[N].getPosition(),
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING,
        },
        function (result, status) {
            if (status === 'OK') {
                taxiRouteDisplay.setMap(map);
                // 尝试更新状态
                setRoutes({...routes, [N + 1]: result});
                console.log(result, N + 1);
            }
        }
    );
}

在上述代码中，预期的结果是routes状态最终会包含两条路线的数据，例如{1: {...}, 2: {...}}。然而，实际观察到的现象是，状态可能被错误地更新为{1: null, 2: {...}}，即第一条路线的数据丢失了。

问题根源：闭包与陈旧状态

这个问题的核心在于JavaScript的闭包特性以及React状态更新的异步性质。当useEffect中的两个drawTaxiRoute函数被调用时，它们都捕获了当时routes状态的初始值，即{1: null, 2: null}。

由于Directions API的请求是异步的，两个回调函数会在未来的某个时间点执行。假设：

1. drawTaxiRoute(0, ...)的回调首先完成，它执行setRoutes({...routes, [1]: result1})。这里的routes是初始值{1: null, 2: null}，所以新状态会是{1: result1, 2: null}。
2. 紧接着，drawTaxiRoute(1, ...)的回调完成，它执行setRoutes({...routes, [2]: result2})。关键在于，这里的routes仍然是drawTaxiRoute(1, ...)被调用时捕获的初始值{1: null, 2: null}，而不是经过第一次更新后的{1: result1, 2: null}。 因此，它会基于陈旧的状态创建一个新对象{1: null, 2: result2}，并将其设置为新的状态，从而覆盖了第一条路线的数据。

这就是所谓的“陈旧闭包”问题，在并发异步操作中尤为常见。

解决方案：使用函数式状态更新

React的useState钩子提供了一个强大的机制来解决这个问题：函数式状态更新。当setRoutes方法接收一个函数作为参数时，React会保证这个函数接收到的第一个参数是当前最新的状态值。

ProfilePicture.AI

在线创建自定义头像的工具

67

查看详情

修改setRoutes的调用方式如下：

setRoutes((oldValue) => ({...oldValue, [N + 1]: result}));

让我们看看修改后的drawTaxiRoute函数：

function drawTaxiRoute(N = 0, taxis, destination, map, setRoutes) { // 移除 routes 参数，因为它不再需要
    // ... 其他逻辑，例如初始化 directionsService 和 taxiRouteDisplay

    directionsService.route(
        {
            origin: taxis[N].getPosition(),
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING,
        },
        function (result, status) {
            if (status === 'OK') {
                taxiRouteDisplay.setMap(map);
                // 使用函数式更新
                setRoutes((prevRoutes) => ({...prevRoutes, [N + 1]: result}));
                console.log(result, N + 1);
            }
        }
    );
}

在useEffect中调用时，也无需再传递routes参数：

useEffect(() => {
    drawTaxiRoute(0, data.taxis, data.origin, data.map, setRoutes); // 移除 routes 参数
    drawTaxiRoute(1, data.taxis, data.origin, data.map, setRoutes); // 移除 routes 参数
}, []);

为什么函数式更新有效？

当setRoutes接收一个函数作为参数时，React会：

1. 将当前最新的routes状态值作为prevRoutes参数传递给这个函数。
2. 执行这个函数，并使用其返回值作为新的状态。

这样，无论drawTaxiRoute的哪个回调函数先执行，它都会基于当时最新的routes状态来创建新的状态。

例如：

1. drawTaxiRoute(0, ...)的回调完成，它调用setRoutes((prevRoutes) => ({...prevRoutes, [1]: result1}))。此时prevRoutes是{1: null, 2: null}，新状态变为{1: result1, 2: null}。
2. 稍后，drawTaxiRoute(1, ...)的回调完成，它调用setRoutes((prevRoutes) => ({...prevRoutes, [2]: result2}))。此时，React会保证prevRoutes是最新的状态，即{1: result1, 2: null}。因此，新状态将正确地变为{1: result1, 2: result2}。

通过这种方式，我们确保了每次状态更新都基于最新的快照，从而避免了并发异步操作导致的状态覆盖问题。

总结与最佳实践

当你的新状态依赖于旧状态时（例如，你需要合并、修改或基于旧状态计算新值），尤其是在异步或并发操作中，始终优先使用useState的函数式更新形式。这不仅可以避免因闭包捕获陈旧状态值而导致的问题，还能使你的状态管理更加健壮和可预测。

记住，setStates(newValue)适用于新状态完全独立于旧状态的情况，而setStates((prevValue) => newComputedValue)则适用于新状态需要基于旧状态计算的情况。理解并恰当运用这两种更新方式，是编写高质量React应用的关键。

以上就是React异步并发更新State：避免覆盖的函数式方案的详细内容，更多请关注php中文网其它相关文章！