@@ -1,108 +1,96 @@
import React from 'react'
import styles from './App.module.scss'
class MyComponent extends React . Component {
class Clock extends React . Component {
constructor ( props ) {
super ( props ) ;
this . state = { data : null } ;
this . handleClick = this . handleClick . bind ( this ) ;
this . state = { date : new Date ( ) } ;
}
render ( ) {
return (
< div >
{ this . state . data ? (
< div > Данные : { this . state . data } < / div >
) : (
< div > Загрузка ... < / div >
) }
< button onClick = { this . handleClick } > Обновить < / button >
< / div >
)
}
componentDidMount ( ) {
fetch ( 'https://api.example.com/data' )
. then ( responce => responce . json ( ) )
. then ( json => this . setState ( { data : json } ) ) ;
this . timerId = setInterval ( ( ) => console . log ( 'Tick' ) , 1000 ) ;
this . timerId = setInterval ( ( ) => this . tick ( ) , 1000 ) ;
}
componentWillUnmout ( ) {
clearInterval ( this . timerId ) ;
}
handleClick ( ) {
this . setState ( { data : 'Данные' } )
}
}
class MyComponent2 extends React . Component {
controller = new AbortController ( )
componentDidMount ( ) {
fetch ( 'https://api.example.com/data' , { singnal : this . controller . signal } )
. then ( responce => responce . json ( ) )
. then ( json => this . setState ( { data : json } ) )
. catch ( error => {
if ( error . name == 'AbortError' ) {
console . log ( 'Aborted' ) ;
} else {
console . log ( 'Other error' , error ) ;
}
} ) ;
}
componentWillUnmount ( ) {
this . controller . abort ( )
clearInterval ( this . timerId )
}
tick ( ) {
this . setState ( { date : new Date ( ) } )
}
render ( ) {
return < div > { this . state . date . toLocaleTimeString ( ) } < / div >
}
}
class MyComponent3 extends React . Component {
componentDidMount ( ) {
this . loadData ( ) ;
function Clock2 ( ) {
const [ date , setDate ] = React . useState ( new Date ( ) ) ;
React . useEffect ( ( ) => {
const timerId = setInterval ( ( ) => setDate ( new Date ( ) ) , 1000 ) ;
return ( ) => clearInterval ( timerId ) ;
} , [ ] )
return < div > { date . toLocaleTimeString ( ) } < / div >
}
function MouseTracker ( ) {
const [ x , setX ] = React . useState ( 0 ) ;
const [ y , setY ] = React . useState ( 0 ) ;
const mouseMoveHandler = event => {
setX ( event . clientX ) ;
setY ( event . clientY ) ;
}
async loadData ( ) {
try {
const response = await fetch ( 'https://api.example.com/data' ) ;
const data = await response . json ( ) ;
this . setSate ( { data } ) ;
} catch {
console . log ( 'error' ) ;
React . useEffect ( ( ) => {
document . addEventListener ( 'mousemove' , mouseMoveHandler ) ;
return ( ) => {
document . removeEventListener ( 'mousemove' , mouseMoveHandler ) ;
}
}
} , [ ] ) ;
return < div className = { styles . container } >
< p > Координаты мыши : < br / > X : < b > { x } < / b > , Y : < b > { y } < / b > < / p >
< / div >
}
class Timer extends React . Component {
constructor ( props ) {
super ( props ) ;
this . state = { seconds : 0 }
function DataFetcher ( ) {
const [ posts , setPosts ] = React . useState ( [ ] ) ;
const [ users , setUsers ] = React . useState ( [ ] ) ;
const getPosts = async ( ) => {
const response = await fetch ( 'https://jsonplaceholder.typicode.com/posts' ) ;
const data = await response . json ( ) ;
setUsers ( data . reduce ( ( acc , value ) => {
if ( ! ( value . userId in acc ) )
return [ ... acc , value . userId ]
return acc
} ) )
console . log ( users ) ;
setPosts ( data . slice ( 1 , 10 ) ) ;
}
componentDidMount ( ) {
console . log ( 'Timer mounted' ) ;
this . interval = setInterval ( ( ) => {
this . setState ( prevState => ( { seconds : prevState . seconds + 1 } ) )
} , 1000 ) ;
}
React . useEffect ( ( ) => {
console . log ( "Компонент создан" ) ;
getPosts ( ) ;
return ( ) => { console . log ( "Компонент удален" ) ; setPosts ( [ ] ) } ;
} , [ ] )
componentWillUnmount ( ) {
console . log ( 'Timer unmount' ) ;
clearInterval ( this . interval ) ;
}
render ( ) {
return < h2 > Прошло секунд : { this . state . seconds } < / h2 >
}
return < div > < ol > { posts . map ( post => < li id = { post . id } > { post . title } < / li > ) } < / ol > < / div >
}
function App ( ) {
const [ show , setShow ] = React . useState ( true ) ;
const [ tracker , setTracker ] = React . useState ( false ) ;
const [ dataFetcher , setDataFetcher ] = React . useState ( false ) ;
return (
< >
< h1 > Таймер с классом < / h1 >
< button onClick = { ( ) => setShow ( prev => ! prev ) } > { show ? 'Скрыть' : 'Показать' } таймер < / button >
{ show && < Timer / > }
< h1 > Hello , React ! < / h1 >
< Clock / >
< Clock2 / >
< button onClick = { ( ) => setTracker ( ! tracker ) } > Показать / Скрыть трекер < / button >
{ tracker && < MouseTracker / > }
< button onClick = { ( ) => setDataFetcher ( ! dataFetcher ) } > Показать / Скрыть посты < / button >
{ dataFetcher && < DataFetcher / > }
< / >
)
}
laktionov-as