Reactjs 在一个事件处理程序中进行多次调度是个好主意吗

最佳实践之一是:

Avoid Dispatching Many Actions Sequentially个

Avoid dispatching many actions in a row to accomplish a larger conceptual "transaction".这是合法的，但通常会导致多次相对昂贵的UI更新，并且一些中间状态可能会被应用程序逻辑的其他部分潜在地无效.更喜欢分派一个"事件"类型的操作，该操作同时导致所有适当的状态更新，或者考虑使用操作批处理插件来分派多个操作，最后只有一个UI更新.

原因1.多个状态更新会导致多个渲染.

如果您正在使用React<；18版本，并在setTimeout()、promise.then(resolveCallback)中按顺序分派许多操作，则应该使用react-redux中batch()个API，这些API使用的是React.unstable_batchedUpdates()个API，以允许将事件循环计时器中的任何react 更新批处理到单个呈现过程中.

因为handleBtnClick看起来像一个事件处理程序，所以您不需要使用batch()API.Reaction已经在内部将其用于其自己的事件处理程序回调.

原因2.中间状态

此外，概念上属于较大"事务"样式更新序列一部分的多个分派将导致可能不被视为有效的中间状态

如果我们可以更新一次状态，为什么我们要更新三次呢？

改进的方法是使用所有三个有效负载分派单个操作

import React from 'react';

const ACTIONS_CITY = {
    CONVERT_CITY_NAME: 'CONVERT_CITY_NAME',
    CHANGE_POPULATION: 'CHANGE_POPULATION',
    CHANGE_REGION: 'CHANGE_REGION',
    CHANGE_CITY: 'CHANGE_CITY',
};

const cityReducer = (state, action) => {
    switch (action.type) {
        case ACTIONS_CITY.CHANGE_CITY: {
            return {
                ...state,
                ...action.payload,
            };
        }
        case ACTIONS_CITY.CONVERT_CITY_NAME: {
            return {
                ...state,
                [state.cityCoordinates]: action.payload,
            };
        }
        case ACTIONS_CITY.CHANGE_POPULATION: {
            return {
                ...state,
                [state.population]: action.payload,
            };
        }
        case ACTIONS_CITY.CHANGE_REGION: {
            return {
                ...state,
                [state.region]: action.payload,
            };
        }
        default:
            return state;
    }
};

export default function App() {
    const [city, dispatch] = React.useReducer(cityReducer, { cityCoordinates: '100', population: 10000, region: 'japan' });
    console.log(city);
    const handleBtnClick = () => {
        dispatch({
            type: ACTIONS_CITY.CHANGE_CITY,
            payload: {
                cityCoordinates: '120',
                population: 20000,
                region: 'U.S',
            },
        });
    };

    return (
        <div className="App">
            <button onClick={handleBtnClick}>click me</button>
        </div>
    );
}

codesandbox个

进一步阅读:Should I dispatch multiple actions in a row from one action creator?