Вызов componentDidMount() в компоненте React, который не является расширенным классом React.component

У меня есть компонент реакции, который я позже визуализирую внутри своего index.js.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.jsx

import SomeComponent from "./Components/SomeComponent ";

function App() {
    return <SomeComponent />
}

export default App;

SomeComponent.jsx (случайное имя компонента для примера)

function SomeComponent() {

  //some code

  return ...

}

export default SomeComponent;

Проблема в том, что я вижу много людей, использующих

class SomeComponent extends React.Component {

  componentDidMount()
  //some code

  render() {
    return ...
  }
}

И я хочу использовать этот "componentDidMount()", который я вижу во многих примерах кода, но с моим способом работы это кажется невозможным.

Но... возможно? или есть другой подобный метод, который я могу использовать?

Спасибо.

Вы захотите изучить useEffect

Nicholas Tower 20.12.2020 00:38

Кажется, это должно сработать для меня, спасибо!

Kevin Buguecio 20.12.2020 00:40
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
247
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В функциональных компонентах из React 16.8, у нас есть React Hooks. И мы можем использовать useEffect() Hook для имитации того, что componentDidMount() делает в компоненте на основе классов. Однако вам нужно будет передать второй аргумент в качестве значения состояния в useEffect(), только тогда он будет вести себя как componentDidMount() всякий раз, когда значение состояния изменяется.

Что-то вроде этого:

const [stateValue,useStateValue] = useState("enjoy");

useEffect(()=>{
 // ... Your code
},[stateValue]);

Другие вопросы по теме