Заготовка компонента с жизнеными циклами
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() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* Добавьте тестовый контент для проверки */}
|
|
||||||
<h1>Hello, React!</h1>
|
<h1>Hello, React!</h1>
|
||||||
|
<MyComponent name="Alex" />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,7 +4,5 @@ import { createRoot } from 'react-dom/client'
|
|||||||
import App from './App.jsx'
|
import App from './App.jsx'
|
||||||
|
|
||||||
createRoot(document.getElementById('root')).render(
|
createRoot(document.getElementById('root')).render(
|
||||||
<StrictMode>
|
|
||||||
<App />
|
<App />
|
||||||
</StrictMode>
|
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user