Преобразование жизненного цикла в крючки для функционального компонента

Question

В моем коде есть жизненный цикл componentWillReceiveProps, и я хочу написать его для функционального компонента. Как я видел, это возможно только с React Hooks. Проблема в том, что я не очень хорошо понял, и мне нужна помощь.

Итак, как бы это было написано в функциональном компоненте?

Я видел несколько примеров, но не совсем как в этом случае.

componentWillReceiveProps = (newProps) => {
    const apiData = newProps.apiData;

    if (apiData.articles) {
        this.setState(() => ({
            pageLoading: false,
            articles: apiData.articles.articles,
        }), () => {
            //this.filterDisplayedArticles()
        })
    } else if (apiData.articleSearch && apiData.articleSearch.success) {
        let articles = apiData.articleSearch.articles;
        this.setState(() => ({
            pageLoading: false,
            articles: articles
        }))
    }
}

Answer 1

вы можете использовать ловушку useState для управления состоянием, а компонент - получит реквизиты, didmount и волю для монтирования. Эффект ловушки позволяет увидеть нижеприведенный код для функционального компонента

Answer 2

вы можете использовать хук useEffect здесь, чтобы применить изменения, основанные на необходимых параметрах И используйте хук useState для отслеживания вашего состояния

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

function DoSomething({ apiData }) {
  const { articles, articleSearch } = apiData;
  const { state, setState } = useState({ pageLoading: true, articles: [] });

  useEffect(() => {
    if (articles) {
      setState({
        pageLoading: false,
        articles: apiData.articles.articles
      });
    } else if (articleSearch && articleSearch.success) {
      setState({
        pageLoading: false,
        articles: articleSearch.articles
      });
    }
  }, [articles, articleSearch]);

  return <div>I'm {state.pageLoading ? "loading" : "done loading"}</div>;
}

Играйте с ним вживую:)