componentWillMount для реагирования функционального компонента? - PullRequest
Новая
       89

componentWillMount для реагирования функционального компонента?

0 голосов
/ 29 мая 2020

Я хочу знать, что для компонента класса реакции у нас есть componentWillMount () метод жизненного цикла, с помощью которого мы можем выполнять задачи перед загрузкой компонента. Такие задачи, как вызов серверной части и использование ответа для отображения этих данных в этом интерфейсе. Что, если мне нужно то же самое в функциональном компоненте? например, я использовал диаграмму реагирования JS и для этого значения данных, которые я хочу получить из ответа серверной части, а затем диаграмма будет заполнена на основе этих данных.

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

1 Ответ

3 голосов
/ 29 мая 2020

componentWillMount вызывается только один раз перед начальным рендерингом. Я делаю образец кода, посмотрите его ниже 

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [mounted, setMounted] = useState(false)

  if(!mounted){
    // Code for componentWillMount here
    // This code is called only one time before intial render
  }

  useEffect(() =>{
    setMounted(true)
  },[])

  return (
    <div className="App">
      
    </div>
  );
}
  • Как вы упомянули, вы хотите сделать вызов api, это обычно происходит в componentDidmount, и вы можете просто использовать useEffect хук с пустым массивом в качестве зависимостей в функциональной составляющей 

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [mounted, setMounted] = useState(false)


  useEffect(() =>{
    // This is similar to componentDidMount
    // Call back-end api here
  },[])

  return (
    <div className="App">
      
    </div>
  );
}
...