Question

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

注意到当我使用钩子/反应组件时，它具有不同的行为。当我使用componentDidMount在react组件中编写它时，一切正常。但是对于钩子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);

Answer 1

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

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

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

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

在useEffect（）中使用useDispatch（）时，动作似乎不会立即被调用

1 个答案: