При использовании useDispatch () внутри useEffect () действие не вызывается сразу - PullRequest
Новая
       6

При использовании useDispatch () внутри useEffect () действие не вызывается сразу

4 голосов
/ 06 января 2020

Я хочу отправить действие, когда страница впервые монтируется. Это действие немедленно устанавливает значение loading в значение true, а через 2 секунды устанавливает его в значение false.

Обращая внимание на то, что при использовании компонента hooks / реагировать он ведет себя по-разному. Когда я пишу его в компоненте реакции, используя 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);

Ответы [ 2 ]

8 голосов
/ 06 января 2020

Это потому, что useEffect и componentDidMount запускаются в разных частях жизненного цикла React.

componentDidMount и useLayoutEffect запускаются синхронно, в конце "фазы фиксации".

useEffect выполняется асинхронно с небольшой задержкой, отдельно от «фазы фиксации».

Так что нет, они не совсем эквивалентны.

0 голосов
/ 07 января 2020

потому что useEffect запускается после реакции, рендеринг его компонента

...