Блог

Я пытаюсь реализовать useEffect для моего componentDidMount, но я не знаю, как это сделать в данном случае:

  componentDidMount() {
    logNavego(this.props.history.location.pathname   
    this.props.history.location.search )
    this.unlisten = this.props.history.listen(location => {
      logNavego(location.pathname   location.search)
    })
  }
  

Попробуйте это.

 import React, { useEffect } from 'react';

useEffect(() => {
  // all your code that you put in  componentDidMount method
}, [])
  

в useEffect мы используем [] . это [] похоже на componentDidMount.

Теперь, если вы хотите использовать componentDidUpdate, вам нужно передать состояние в [] .

например. если в данный момент количество обновлений равно, вы хотите что-либо изменить, тогда посмотрите этот код.

 useEffect(() => {
  // all your code goes here related to count state.
}, [count])
  

итак, приведенный выше код вызовет повторный рендеринг, если количество изменится, иначе он не будет вызываться.

Поскольку вы хотите вызывать history.listen только при первоначальном рендеринге и очищать прослушиватель при размонтировании, вы можете вызвать useEffect with empty array в качестве массива зависимостей и вернуть функцию очистки

 useEffect(() => {
    logNavego(props.history.location.pathname   props.history.location.search )
    const unlisten = props.history.listen(location => {
      logNavego(location.pathname   location.search)
    });
    return () => {
       unlisten();
    }
  }, [])
  

Вы можете обратиться к useEffect документам для получения более подробной информации