Где я должен делать вызовы AJAX и API в компонентах функций React.js?

Question

Я узнал больше о функциональных компонентах React.js и начал переводить одно из моих приложений React.js, чтобы использовать их вместо стандартных компонентов реакции. В моих компонентах реагирования я выполнял вызовы AJAX / API в функции componentDidMount(). Поскольку эта функция не существует в компонентах функций, я не уверен, где их разместить.

Я не смог найти ответ на сайте React.js, единственной странице , которую я мог найти в AJAX иAPI показывает выполнение этих вызовов со стандартными компонентами реагирования в функции componentDidMount().

Answer 1

Это то, что дает нам хуки React - способы создания побочных эффектов в функциональных компонентах:

https://reactjs.org/docs/hooks-effect.html

со страницы документа:

Есливы знакомы с методами жизненного цикла класса React и можете использовать useEffect Hook как комбинацию componentDidMount, componentDidUpdate и componentWillUnmount.

, например:

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

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    //do an ajax call here
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Answer 2

Для добавления функций жизненного цикла к функциональным компонентам можно использовать response-pure-lifecycle.

Пример:

import React, { Component } from 'react';
import lifecycle from 'react-pure-lifecycle';

const methods = {
    componentDidMount(props) {
    //ajax call here
    }
};

const Channels = props => (
      <h1>Hello</h1>
  )

export default lifecycle(methods)(Channels);