我如何使用 useEffect 替换 componentDidMount？

Question

I would like to use useEffect() to instead of componentWillMount() , but I found the hook can not use in class components, so I change the code as Function component, but it will get more error for the whole component, all code with this.xxx are getting an error, how could I edit below code to make it work? Please help me. Below code is working fine with componentWillMount() .

import React, { Component } from 'react';
import './index.less';
import { formateDate } from '../../utils/dateUtils';
import memoryUtils from '../../utils/memoryUtils';
import { reqWeather } from '../../api/index';
import { withRouter } from 'react-router-dom';
import menuList from '../../config/menuConfig';

class Header extends Component {
  state = {
    currentTime: formateDate(Date.now()),
    dayPictureUrl: '',
    weather: '',
  };
  getTime = () => {
    setInterval(() => {
      const currentTime = formateDate(Date.now());
      this.setState({ currentTime });
    }, 1000);
  };
  getWeather = async () => {
    const { dayPictureUrl, weather } = await reqWeather('Auckland');
    this.setState({ dayPictureUrl, weather });
  };
  getTitle = (props) => { 
    const path = this.props.location.pathname;
    let title;
    menuList.forEach(item => {
      if (item.key === path) {
        title = item.title;
      } else if (item.children) {
        const cItem = item.children.find(cItem => cItem.key === path);
        if (cItem) {
          title = cItem.title;
        }
      }
    });
    return title;
  };
  componentDidMount() {
    this.getTime();
    this.getWeather();
  }
  render() {
    const { currentTime, dayPictureUrl, weather } = this.state;
    const username = memoryUtils.user.username;
    const title = this.getTitle();
    return (
      <div className="header">
        <div className="header-top">
          <span>Welcome, {username}</span>
          <a href>logout</a>
        </div>
        <div className="header-bottom">
          <div className="header-bottom-left">{title}</div>
          <div className="header-bottom-right">
            <span>{currentTime}</span>
            <img src={dayPictureUrl} alt="weather" />
            <span>{weather}</span>
          </div>
        </div>
      </div>
    );
  }
}
export default withRouter(Header)

Answer 1

I've converted from react classes to react hooks I hope it help, I haven't tested because I don't have the external files that you have but I hope it helps otherwise just comment on this solution ;)

import React, { useState, useEffect } from 'react';
import './index.less';
import { formateDate } from '../../utils/dateUtils';
import memoryUtils from '../../utils/memoryUtils';
import { reqWeather } from '../../api/index';
import { withRouter, useLocation } from 'react-router-dom';
import menuList from '../../config/menuConfig';



function Header(){
const [currentTime, setCurrentTime] = useState(formateDate(Date.now()))
const [dayPictureUrl, setDayPictureUrl] = useState('')
const [weather, setWeather] = useState('')
const location = useLocation();
const path = location.pathname;

useEffect(() => {
    getTime();
    getWeather();
},[]);


const getTime = () => {
    setInterval(() => {
      const currentTime = formateDate(Date.now());
      setCurrentTime(currentTime)
    }, 1000);
  };
const   getWeather = async () => {
    const { dayPictureUrl, weather } = await reqWeather('Auckland');
    setDayPictureUrl(dayPictureUrl)
    setWeather(weather)

  };
const  getTitle = (props) => { 
    let title;
    menuList.forEach(item => {
      if (item.key === path) {
        title = item.title;
      } else if (item.children) {
        const cItem = item.children.find(cItem => cItem.key === path);
        if (cItem) {
          title = cItem.title;
        }
      }
    });
    return title;
  };
  const username = memoryUtils.user.username;
  const title = getTitle();
  return (<div className="header">
  <div className="header-top">
    <span>Welcome, {username}</span>
    <a href>logout</a>
  </div>
  <div className="header-bottom">
    <div className="header-bottom-left">{title}</div>
    <div className="header-bottom-right">
      <span>{currentTime}</span>
      <img src={dayPictureUrl} alt="weather" />
      <span>{weather}</span>
    </div>
  </div>
</div>  )
}


export default Header

Answer 2

Here's my go at converting the function to using hooks.

One of the best things about hooks is that they can all be called as many times as you like, which allows us to separate the concerns of a component into logical blocks.

useEffect shouldn't be considered a direct replacement for componentDidMount as it works differently. The closest would actually be useLayoutEffect because of the timing of it matches componentDidMount and componentdDidUpdate . More detail on the difference between the two: useEffect vs useLayoutEffect . Although you should in general use useEffect primarily.

Getting used to hooks requires a bit of a shift in how you think of components, but in my opinion, it's worth the effort to switch!

import React, {useEffect, useMemo, useState} from 'react';
import './index.less';
import { formateDate } from '../../utils/dateUtils';
import memoryUtils from '../../utils/memoryUtils';
import { reqWeather } from '../../api/index';
import { useLocation } from 'react-router-dom';
import menuList from '../../config/menuConfig';

export default function Header (props){
  const [currentTime, setCurrentTime] = useState(formateDate(Date.now()));
  useEffect(()=>{
    const intervalId = setInterval(()=>{
      setCurrentTime(formateDate(Date.now()));
    },1000)
    // Make sure to cleanup your effects!
    return ()=>{clearInterval(intervalId)}
  },[])

  const [dayPictureUrl, setDayPictureUrl] = useState('');
  const [weather, setWeather] = useState('');
  useEffect(() => {
    const getWeather = async () => {
      const { dayPictureUrl, weather } = await reqWeather('auckland');
      setDayPictureUrl(dayPictureUrl);
      setWeather(weather);
    };
    // Assuming that we want to have the weather dynamically based on a passed in prop (i.e. props.city), or a state.
    getWeather();
  }, []);

  // useLocation gets the location via a hook from react router dom
  const location = useLocation();
  const title = useMemo(()=>{
    // useMemo as this can be an expensive calculation depending on the length of menuList
    // menuList is always a constant value, so it won't change
    const path = location.pathname;
    let title;
    menuList.forEach(item => {
      if (item.key === path) {
        title = item.title;
      } else if (item.children) {
        const cItem = item.children.find(cItem => cItem.key === path);
        if (cItem) {
          title = cItem.title;
        }
      }
    });
    return title;
  },[location.pathname])
  
  const username = memoryUtils.user.username;

  return (
    <div className="header">
      <div className="header-top">
        <span>Welcome, {username}</span>
        <a href>logout</a>
      </div>
      <div className="header-bottom">
        <div className="header-bottom-left">{title}</div>
        <div className="header-bottom-right">
          <span>{currentTime}</span>
          <img src={dayPictureUrl} alt="weather" />
          <span>{weather}</span>
        </div>
      </div>
    </div>
  );
}