Заготовка компонента с жизнеными циклами
This commit is contained in:
+31
-2
@@ -1,10 +1,39 @@
|
||||
// удаляем все, оставляя лишь пустую функцию App ниже
|
||||
import React from 'react'
|
||||
|
||||
class MyComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = { count: 0 }
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log('Компонент смонтирован')
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps,prevState) {
|
||||
console.log('Компонент обнвлен')
|
||||
if(prevState.count !== this.state.count) {
|
||||
console.log('Состояние изменилось')
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
console.log('Компонент будет размонтирован')
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>
|
||||
Привет мир! {this.props.name} {this.state.count}
|
||||
<button onClick={()=> this.setState({ count: this.state.count })}>Жми!</button>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
{/* Добавьте тестовый контент для проверки */}
|
||||
<h1>Hello, React!</h1>
|
||||
<MyComponent name="Alex" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -4,7 +4,5 @@ import { createRoot } from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user