Compare commits

...

2 Commits

2 changed files with 37 additions and 5 deletions
+37 -3
View File
@@ -1,10 +1,44 @@
// удаляем все, оставляя лишь пустую функцию App ниже import React from 'react'
class Clock extends React.Component {
constructor(props) {
super(props)
this.state = { time: new Date().toLocaleTimeString() }
}
componentDidMount() {
this.timerId = setInterval(()=>{
this.setState({ time: new Date().toLocaleTimeString() })
}, 1000);
console.log('Таймер смонтирован')
}
componentDidUpdate(prevProps,prevState) {
console.log('Компонент обнвлен')
}
componentWillUnmount() {
clearInterval(this.timerId)
console.log('Компонент таймера размонтирован')
}
render() {
return <div>
<h2>Текущее время: {this.state.time}</h2>
</div>
}
}
function App() { function App() {
const [showClock, setShowClock] = React.useState(true);
return ( return (
<> <>
{/* Добавьте тестовый контент для проверки */} <h1>Жизненный цикл компонента часов</h1>
<h1>Hello, React!</h1> <button onClick={()=> setShowClock(!showClock)}>
{showClock ? 'Скрыть часы' : 'Показать часы' }
</button>
{showClock && <Clock />}
</> </>
) )
} }
-2
View File
@@ -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>
) )