在某些情况下 React 批处理道具会更新吗？

Question

我很好奇 React 是否会在极少数情况下批量更新 props？文档中没有提到这一点，但我无法对以下情况提出任何其他解释。

我有一个等价于以下代码：

// Connected component
class MyComponent extends React.Component {
    state = {
        shouldDisplayError: false,
    };

    componentDidUpdate(prevProps) {
        console.log("componentDidUpdate: " + this.props.dataState);
        if (
            prevProps.dataState === "FETCHING" &&
            this.props.dataState === "FETCH_FAILED"
        ) {
            this.setState(() => ({ shouldDisplayError: true }));
        }
    }

    render() {
        return this.state.shouldDisplayError && <p>Awesome error message!</p>;
    }
}

const mapStateToProps = (state) => {
    const dataState = getMyDataStateFromState(state);
    // dataState can be "NOT_INITIALIZED" (default), "FETCHING", "FETCH_SUCCEEDED" or "FETCH_FAILED"
    console.log("mapStateToProps: " + dataState);
    return {
        dataState,
    };
};

export default connect(mapStateToProps)(MyComponent);

// A thunk triggered by a click in another component:
export async const myThunk = () => (dispatch) => {
    dispatch({ type: "FETCHING_DATA" });
    let result;
    try {
        result = await API.getData(); // an error thrown immediately inside of here
    } catch (error) {
        dispatch({ type: "FETCHING_DATA_FAILED" });
        return;
    }
    dispatch({type: "FETCHING_DATA_SUCCEEDED", data: result.data});
}

// Let's say this is the API:
export const API = {
    getData: () => {
        console.log("> api call here <");
        throw "Some error";  // in a real API module, there's a check that would throw in some cases - this is the equivalent for the unhappy path observed
        // here would be the fetch call
    },
}

我希望在控制台中看到触发 API 调用（立即失败），如下： p>

mapStateToProps: FETCHING
componentDidUpdate: FETCHING
> api call here <
mapStateToProps: FETCH_FAILED
componentDidUpdate: FETCH_FAILED

但是，我可以看到以下内容：

mapStateToProps: FETCHING
> api call here <
mapStateToProps: FETCH_FAILED
componentDidUpdate: FETCH_FAILED

所以MyComponent 组件从未收到"FETCHING" dataState，尽管它已在mapStateToProps 函数中看到。因此从未显示错误消息。为什么？是因为 React 对组件的 props 进行了如此快速的更新（例如在某些情况下对 this.setState() 的调用）？？？

基本上，问题是：如果我分派两个动作，彼此非常快，触发组件的道具更新，React 是否批处理它们，有效地忽略第一个？

Answer 1

第一次渲染组件时，不会调用 componentDidUpdate。相反，componentDidMount 被调用。在 componentDidMount 中也登录到控制台以查看消息。