Question

我的代码现在选择一个日期，该类在另一个文件中使用。以ddd D MMMM格式呈现日期的位置。我想将我的代码从类更改为React钩子，但我不确定如何执行此操作。这是代码：

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挂钩，请向我解释该过程，因为这将是一个很大的变化，以了解更多有关react Hooks的信息。谢谢

Answer 1

您需要牢记以下将钩子将类转换为功能组件的事情。

首先：使用useState钩子代替状态。

第二：将生命周期方法更改为useEffect钩子。

第三：将类变量更改为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;

要详细了解这些钩子，请阅读React docs。

从“类”更改为“反应挂钩”

1 个答案: