Переход от «класса» к «React Hooks» - PullRequest
Новая
       4

Переход от «класса» к «React Hooks»

0 голосов
/ 28 июня 2019

Мой код сейчас выбирает дату, и этот класс используется в другом файле.Где он отображает дату в формате ddd D MMMM.Я хочу изменить свой код с класса на ловушку реагирования, и я не очень уверен, как это сделать.Вот код: 

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;

Если кому-то удастся преобразовать мой код в ответные хуки, пожалуйста, объясните мне этот процесс, так как было бы здорово узнать больше о реагирующих хуках.Спасибо

1 Ответ

1 голос
/ 28 июня 2019

Необходимо помнить о следующих вещах, которые преобразуют классы в функциональные компоненты с помощью ловушек.

Сначала: используйте useState крюк вместо состояния.

Второе: измените методы жизненного цикла на useEffect hooks.

В-третьих: изменить переменные классов на 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;

Для более детального понимания каждого из этих крючков, прочитайте Реактивная документация .

...