javascript - 从 "class"更改为 "React Hooks"

Question

我的代码现在选择一个日期，并且此类在另一个文件中使用。它以 ddd D MMMM 格式呈现日期。我想将我的代码从类更改为 react 钩子(Hook)，但我不太确定如何执行此操作。这是代码:

import React, { Component } from "react";
import moment from "moment";
 
class DayPicker extends Component {
  constructor(props) {
    super(props);
    this.state = { date: Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: Date(),
    });
  }

  render() {
    return (
      <div className={style.dayPicker}>
        {moment()
          .add(daysToAdd ? daysToAdd : 0, "day")
          .format("ddd D MMMM")}
      </div>
    );
  }
}

export default DayPicker;

如果有人设法将我的代码转换为 React Hooks，请向我解释该过程，因为了解更多有关 React Hooks 的信息将是一个巨大的改变。

Answer 1

使用钩子(Hook)将类转换为功能组件时，您需要记住以下事项。

首先:使用 useState 钩子(Hook)代替状态。

第二:将生命周期方法更改为 useEffect Hook 。

第三:将类变量更改为useRef。

import React, { useState, useEffect } from "react";
import moment from "moment";

const DayPicker = ()=> {
  const [date, setDate] = useState(new Date());

  const timerID = useRef(null);
  useEffect(() => {
     timerID.current = setInterval(() => tick(), 1000);

     return () => {
        // This function will execute on unmount
        clearInterval(timerID.current);
     }
  }, []) // empty array here signifies that the effect will be run once on initial mount


  const tick = () => {
    setDate(new Date())
  }

    return (
      <div className={style.dayPicker}>
        {moment()
          .add(daysToAdd ? daysToAdd : 0, "day")
          .format("ddd D MMMM")}
      </div>
    );
}

export default DayPicker;

要详细了解每个钩子(Hook)，请阅读 React docs .