Блог

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

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

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

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>
  );
}
  

Вы можете использовать react-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);