将React类组件转换为功能组件

Question

我有一个类组件，我想把它转换为功能组件。但我不知道具体怎么操作。

我的类组件

import moment from 'moment';
import Data from '../data';
import nextTime from '../next-time;

class TimesSingleView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Times: this.getTimes(),
      tomorrowsTimes: this.getTomorrowsTimes(),
    };
  }

  getTimes() {
    var _data = new Data();
    return _data.getTimes();
  }

  getTomorrowsTimes() {
    var date = moment()
      .add(1, 'days')
      .format('DD/MM/YYYY');
    var _data = new Data();
    return _data.getTimes(date);
  }

Answer 1

下面是我如何将你所展示的东西设置为功能组件。我使用了 useMemo 因为你没有显示出对状态值的任何修改，但你可以很容易地切换到useState来代替。

import React, { useMemo } from 'react';
import moment from 'moment';
import Data from '../data';
import nextTime from '../next-time;


const TimesSingleView = ()=>{
  const times = useMemo(()=>getTimes());
  const tomorrowsTimes = useMemo(()=>getTomorrowsTimes());
  // If you need to make changes to the times/ tomorrowsTimes, use them as state instead
  // const [times,setTimes] = useState(()=>getTimes());

}

function getTimes(){
  const data = new Data();
  return data.getTimes();
}

function getTomorrowsTimes() {
  const date = moment()
    .add(1, 'days')
    .format('DD/MM/YYYY');
  const _data = new Data();
  return _data.getTimes(date);
}

Answer 2

你应该看看钩子 https:/www.digitalocean.comcommunitytutorialsfive-ways-to-convert-react-class-components-to-functional-components-with-react-hooks