在 useEffect() 中使用 useDispatch() 时，似乎不会立即调用操作答案

【问题标题】：When using useDispatch() inside useEffect(), action doesn't appear to be called immediately在 useEffect() 中使用 useDispatch() 时，似乎不会立即调用操作
【发布时间】：2020-04-24 08:27:46
【问题描述】：

我想在第一次装载页面时调度一个动作。此操作将loading 立即设置为 true，然后在 2 秒后将其设置为 false。

注意到当我使用 hooks/react 组件时它有不同的行为。当我使用componentDidMount 将其写入反应组件时，一切正常。但是使用钩子useEffect，在调用加载操作之前有 0.3 秒的时间间隔。是什么导致了这个微小的时间差距？ useEffect不应该等同于componentDidMount吗？

运行示例

CodeSandbox

useEffect()

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";

import { load } from "./actions/user";

const Router = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(load(true));
  }, [dispatch]);
  const loading = useSelector(state => state.user.loading);
  if (loading) {
    return <div>Loading...</div>;
  }
  return <div style={{ backgroundColor: "red" }}>Loaded</div>;
};

export default Router;

componentDidMount()

import React, { Component } from "react";
import { connect } from "react-redux";

import { load } from "./actions/user";

class Router extends Component {
  componentDidMount() {
    this.props.load(true);
  }

  render() {
    const { loading } = this.props;
    if (loading) {
      return <div>Loading...</div>;
    }
    return <div style={{ backgroundColor: "red" }}>Loaded</div>;
  }
}

export default connect(
  state => ({
    loading: state.user.loading
  }),
  { load }
)(Router);

【问题讨论】：

标签： reactjs redux react-redux react-hooks

【解决方案1】：

这是因为 useEffect 和 componentDidMount 在 React 生命周期的不同部分运行。

componentDidMount 和 useLayoutEffect 在“提交阶段”结束时同步运行。

useEffect 异步运行，有短暂的延迟，与“提交阶段”分开。

所以不，它们并不完全等价。

【讨论】：

感谢您的回答。我以前不知道有什么区别。这是否意味着某些功能（例如不显示此短暂延迟）只能由类组件实现，而不能由 react hooks 实现？
不，useLayoutEffect 与componentDidMount/DidUpdate 最完全等价，因为它们都在提交阶段同步运行。

【解决方案2】：

因为useEffect 在 react 渲染它的组件之后运行

【讨论】：