我如何使用 useEffect 替换 componentDidMount？

Question

我想用useEffect()to 代替componentWillMount()，但是我发现钩子不能在类组件中使用，所以我将代码更改为Function组件，但是整个组件会出错， this.xxx 的所有代码都出现错误，我该如何编辑下面的代码以使其正常工作？请帮我。下面的代码与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

我已经从反应类转换为反应钩子我希望它有所帮助，我没有测试，因为我没有你拥有的外部文件，但我希望它有助于否则只是评论这个解决方案;）

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

这是我将函数转换为使用钩子的尝试。

钩子最好的一点是它们都可以被多次调用，这使我们能够将组件的关注点分成逻辑块。

useEffect 不应被视为 componentDidMount 的直接替代品，因为它的工作方式不同。最接近的实际上是useLayoutEffect，因为它的时间匹配componentDidMount 和componentdDidUpdate。有关两者之间区别的更多详细信息：useEffect vs useLayoutEffect。虽然您通常应该主要使用useEffect。

习惯 Hooks 需要你对组件的看法有所转变，但在我看来，值得努力转换！

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>
  );
}